-1

私は英語を話すのが得意ではないことをすでにあなたに知らせています:S. もし私が間違った文章を作ったら、あなたはその理由を知っています。

色、高さ、幅を入力できるスクリプトを作成しました。送信をクリックすると、画面に結果が表示されます。

setInterval で結果をアニメーション化しようとしています。結果の動きを見たい。

私はあなたが私が何を意味するか知っていることを願っています..

私のスクリプト：

function button(){  
            var width = 0;
            var height = 0;


            var color= document.getElementById("color").value;
            var lengte = document.getElementById("lang").value + 'px';
            var breedte = document.getElementById("breed").value + 'px';

            width++

            document.getElementById("result").style.backgroundColor = color;
            document.getElementById("result").style.width = breedte;
            document.getElementById("result").style.height = lengte;

            if(width == breedte){
                clearInvent(id)
            }
            var id = setInterval(button);
        }
        function maakEvent(){
            document.getElementById("button").onclick = button;
        }
        window.onload = maakEvent;

私のHTML：

<table>
        <tr>
            <td>What color do you want to show?</td><td><input type="text" id="color"></td>
        </tr>
        <tr>
            <td>How long must it be?</td><td><input type="text" id="lang"></td>
        </tr>
        <tr>
            <td>how wide should it be?</td><td><input type="text" id="breed"></td>
        </tr>
        <tr>
            <td><input type="submit" value="show" id="button"></td>
        </tr>
    </table>
    <div id="result"></div>

単語: lengte/lang とbreedte/breed はオランダ語です。長さと幅を意味します。私がオランダ語を話すので、彼らはオランダ人です。

私は何を間違えましたか？

4

1 に答える 1

0

drive235 からの提案に従って、jquery を使用する必要がありますが、これがなくても結果を得ることができます。ただし、SetInterval 構文で発行します。

SetInterval(function(){ }, <interval in millisecond>);

あなたは書くべきです：

 var id = setInterval(function() {button()}, 30000);

別の問題は、割り当てている値にあります。

 document.getElementById("result").style.width = breedte;

最初の反復自体で最終的な幅を割り当てているため、毎回同じになり、効果は表示されません。

コードは次のようになります。

document.getElementById("result").style.width = width;

編集：

(少なくとも) Chrome で動作する完全なコードは次のとおりです。

    <script type="text/javascript">
   var id;
   var width = 0;
    function test(){
     id = setInterval(function(){ button()},1000);
     }
    function button(){  

        var height = 0;


        var color= document.getElementById("color").value;
        var lengte = document.getElementById("lang").value + 'px';
        var breedte = document.getElementById("breed").value + 'px';

        width+=10;

        document.getElementById("result").style.backgroundColor = color;
        document.getElementById("result").style.width = width
        document.getElementById("result").style.height = lengte;

        if(width == breedte){
            clearInvent(id)
        }

    }
    function maakEvent(){
        document.getElementById("button").onclick = test;
    }
    window.onload = maakEvent;

于 2013-10-26T18:45:19.220 に答える