0

オンロードで実行し続けるdivボックスをクリックすると、コードがトリガーされないようです。

<div id='tank' onclick="timer"  style="position:relative; left:100px; top:240px;border-       radius:360px;
 background-color:green; height:100px; width:100px;"></div>
 <script type="text/javascript">

(function () {
// don't leak variables into the global scope - think "variable = carbon dioxide"
    var elem = document.getElementById('tank'), pos = 100,
       timer = setInterval(function() {
        pos++;
        elem.style.left = pos+"px";
        if( pos == 290) clearInterval(timer);

      },12);
  })();

4

2 に答える 2

2 
(function () {
   //...
}());

関数内のコードがすぐに実行されるため、ページの読み込み時にコードが実行されても不思議ではありません。

onclick="timer"

単に何もしません。次のように書くのと同じです。

var foo = 42;
foo; // <- this does not do anything

さらに悪いことに、timerが定義されていない場合、これはエラーをスローします (これはあなたの例の場合です)。

あなたがしなければならないことは、要素にクリックイベントハンドラーとして関数を割り当てることです。例えば：

document.getElementById('tank').onclick = function() {
    var elem = this, 
        pos = 100,
        timer = setInterval(function() {
            pos++;
            elem.style.left = pos+"px";
            if( pos == 290) clearInterval(timer);

        },12);
};

（そしてonclick="timer"あなたのHTMLから削除してください）

イベント処理の詳細については、quirksmode.org の優れた記事を読むことをお勧めします。

于 2012-09-03T15:52:15.460 に答える
0 
<div id='tank' onclick="timer()"  style="position:relative; left:100px; top:240px;border-radius:360px; background-color:green; height:100px; width:100px;">
</div>
<script type="text/javascript">

function timer (){
    alert("h");
    var elem = document.getElementById('tank'), pos = 100,
    timer = setInterval(function() {
        pos++;
        elem.style.left = pos+"px";
        if( pos == 290) clearInterval(timer);

      },12);
}
</script>

コードを少し変更します。

于 2012-09-03T15:51:23.217 に答える