為什么不單擊按鈕就調用函數？

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