2

画像、ボタン、テキストボックスを含むフォームを作成します。ボタンがクリックされたときに、テキストボックスに入力されたものに合わせて画像の高さと幅のサイズを変更する必要があります。ボタンをクリックすると画像が消えます。

ここに私のコードがあります

<!DOCTYPE HTML>
<html>
<head>
    <title>Resize Image</title>
</head>
<body>
<script>
    function resizeimage()
    {
        var theImg = document.getElementById('image');
        theImg.height = size;
        theImg.width = size;
    }
    var size=parseInt(document.getElementById('txtbox'));   
</script>


<form name ="ResizeImage">
<img src = "cookie.jpg" id="image">
</br>
<input type=button value="Resize" onclick="resizeimage()">
</br>
<input type=text id="txtbox"

</form>
</body>
</html>
4

3 に答える 3

1

HTML の問題 (バリデーターを実行してください) とは別に、主な問題は、画像のサイズを読み取るコードの部分が関数の外にあることです。ページの読み込み時に、これが起こります。

  1. 関数resizeimage()が定義されている
  2. varsizeは、その時点での入力にあるものに設定されます
  3. ページのコンテンツが読み込まれます。

2. では、3. がまだ完了していないため、入力がまだ存在していないため、varsizeが に設定されundefinedます。resizeimage()関数は画像のサイズを再度読み取ろうとしないため、その後は変更されません。

また、document.getElementById要素を返します。.valueプロパティを使用して、ユーザーが入力したものを読み取る必要があります

これを試して：

function resizeimage()
{
    var size=parseInt(document.getElementById('txtbox').value);   
    var theImg = document.getElementById('image');
    theImg.height = size;
    theImg.width = size;
}

作業例: http://jsfiddle.net/KZH5p/

于 2013-10-03T12:03:47.817 に答える