为什么不单击按钮就调用函数？

Question

我正在尝试在html中移动按钮的较小块“ onclick”。 但是，要么没有调用该函数，要么甚至在单击按钮之前就在调用它。 如何找出并解决以获得所需的响应？

<html>
<head>
<script>
var pos = 0;
//getting box element
var box = document.getElementById("box");
var time = setInterval(move, 10);
document.getElementById("btn1").onclick = move(){
    if(pos >= 150){
        clearInterval(time);
    } else{
        pos += 1;
        box.style.left = pos+"px";
    }
};
</script>
</head>
<body>
<h1><p id="p1" style="color:#dd3333">Sample Game</p></h1>
<p id="p2" styel="color:#b5b5b5">Click on the button below</p>
<style>
#container{
width:200px;
height:200px;
background:green;
position:relative;
}
#box{
width:50px;
height:50px;
background:red;
position:absolute;
}
</style>
<div id="container">
<div id="box"></div>
</div>
<br></br>
<button id="btn1">Click Me</button>
</body>

</html>

Answer 1

您直接调用函数move 。 代替：

function move(){
    if(pos >= 150){
        clearInterval(time);
    } else{
        pos += 1;
        box.style.left = pos+"px";
    }
}


document.getElementById("btn1").addEventListener("click", move);

另外，由于您不使用任何DOM就绪处理程序来确保文档已准备就绪并已被JS解析，因此请将<script>文件放在结束</body>标记之前。 或快速谷歌搜索如何结合这样的功能，它将告诉您JS可以安全地对DOM元素进行操作。 （例如，这里的jQuery是您的朋友）

 <!DOCTYPE html> <html> <head> </head> <body> <style> #container { width: 200px; height: 200px; background: green; position: relative; } #box { width: 50px; height: 50px; background: red; position: absolute; } </style> <div id="container"> <div id="box"></div> </div> <button id="btn1">Click Me</button> <script> var pos = 0; var box = document.getElementById("box"); var time = null; function move() { if (pos >= 150) { clearInterval(time); } else { pos += 1; box.style.left = pos + "px"; } } document.getElementById("btn1").addEventListener("click", function() { time = setInterval(move, 10); }); </script> </body> </html>

Answer 2

如果您不需要重用该功能，请尝试此操作。

   document.getElementById('btn1').onclick = function()
   {
       alert('you clicked me');
   }

Answer 3

<html>
<head>

</head>
<body>
<h1><p id="p1" style="color:#dd3333">Sample Game</p></h1>
<p id="p2" styel="color:#b5b5b5">Click on the button below</p>
<style>
#container{
width:200px;
height:200px;
background:green;
position:relative;
}
#box{
width:50px;
height:50px;
background:red;
position:absolute;
}
</style>
<div id="container">
<div id="box"></div>
</div>
<br></br>
<button id="btn1">Click Me</button>
<script>

function move(){
if(pos >= 150){
    clearInterval(time);
} else{
    pos += 1;
    box.style.left = pos+"px";
}
}


document.getElementById("btn1").addEventListener("click", move);
var pos = 0;
//getting box element
var box = document.getElementById("box");
var time = setInterval(move, 10);
</script>
</body>

</html>

为什么不单击按钮就调用函数？

问题描述

3 个解决方案

解决方案1
2 已采纳 2017-03-29 19:09:09

解决方案2
0 2017-03-29 19:13:11

解决方案3
0 2017-03-29 19:14:15

为什么不单击按钮就调用函数？

问题描述

3 个解决方案

解决方案1 2 已采纳 2017-03-29 19:09:09

解决方案2 0 2017-03-29 19:13:11

解决方案3 0 2017-03-29 19:14:15

解决方案1
2 已采纳 2017-03-29 19:09:09

解决方案2
0 2017-03-29 19:13:11

解决方案3
0 2017-03-29 19:14:15