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

how to i trigger this code with an onclick event. I have tried and failed

本文关键字：失败 代码 onclick 何使用 事件      更新时间：2023-09-26

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


(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"）

我建议阅读quicksmode.org上的优秀文章，了解更多关于事件处理的信息。

<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>

对代码进行轻微修改。

相关文章：