为什么不单击按钮就调用函数？
[英]Why is function being called without clicking on button?
问题描述
I am trying to move the smaller block 'onclick' of the button in html. 
我正在尝试在html中移动按钮的较小块“ onclick”。 But either it is not calling that function or may be it is calling it even before the button is clicked. 但是，要么没有调用该函数，要么甚至在单击按钮之前就在调用它。 How to find out and solve to get the required response? 如何找出并解决以获得所需的响应？
<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>
3 个解决方案
解决方案1
2 已采纳 2017-03-29 19:09:09
You're directly calling a function move . 您直接调用函数move 。 Instead: 代替：
function move(){
if(pos >= 150){
clearInterval(time);
} else{
pos += 1;
box.style.left = pos+"px";
}
}
document.getElementById("btn1").addEventListener("click", move);
Additionally, since you don't use any DOM ready handler to make sure the document is ready and parsed by JS - place your <script> file before the closing </body> tag. 另外，由于您不使用任何DOM就绪处理程序来确保文档已准备就绪并已被JS解析，因此请将<script>文件放在结束</body>标记之前。 or do a quick google how to incorporate such a function that will tell you JS can safely operate over DOM elements. 或快速谷歌搜索如何结合这样的功能，它将告诉您JS可以安全地对DOM元素进行操作。 (jQuery here, for example is your friend) （例如，这里的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>
解决方案2
0 2017-03-29 19:13:11
Try this, if you do not need to reuse the function. 如果您不需要重用该功能，请尝试此操作。
document.getElementById('btn1').onclick = function()
{
alert('you clicked me');
}
解决方案3
0 2017-03-29 19:14:15
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.