javascript - 如何使用 onclick 事件触发此代码。我尝试过但失败了

Question

当我点击 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);
  })();

Answer 1

(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);
};

(并从 HTML 中删除 onclick="timer")

我建议阅读the excellent articles at quirksmode.org了解有关事件处理的更多信息。