当我运行 .onclick 时，它运行一次，然后它不再工作
[英]when i run .onclick, it runs once, and then it doesnt work again
问题描述
to my understanding, .onclick, should work each time I click the button, however this is only working once.
据我了解，.onclick 每次单击按钮时都应该起作用，但是这只起作用一次。 This is my code so far到目前为止，这是我的代码
var left = document.getElementById("left"); left.onclick = moveLeft; function moveLeft() { var box = document.getElementById("box1"); var pos = 200; if (pos < 500) { pos = pos + 50 box.style.right = pos + "px"; } };
#container { width: 500px; height: 650px; background: black; position: relative; } #left { width: 250px; height: 650px; position: relative; background: transparent; } #right { left: 250px; top: 0px; width: 250px; height: 650px; position: absolute; background: transparent; } #box1 { width: 100px; height: 100px; right: 200px; background: red; position: absolute; } .grid { background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px); background-size: 50px 50px; height: 100%; position: absolute; width: 100%; }
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tetris</title> <link rel="stylesheet" href="styleSheets/main.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="js/jquery.1.js"></script> <script src="js/main.js"></script> </head> <body> <div id="container"> <div class="grid"></div> <div id="box1"></div> <div id="left" onclick="moveLeft()"></div> <div id="right"></div> </div> </body> </html>
like I said, it works, but only once, it shifts the box to the left one square, but it shouldn't stop until after 5 squares.就像我说的，它有效，但只有一次，它将框向左移动一格，但直到 5 格后才停止。 please help...请帮忙...
3 个解决方案
解决方案1
1 2019-12-11 06:49:38
That is because your pos variable is defined inside the moveLeft function.那是因为您的pos变量是在moveLeft函数中定义的。 Every time the function is executed, the pos is always 200. Define it outside the moveLeft function.每次执行该函数时， pos始终为 200。在moveLeft函数之外定义它。
解决方案2
1 2019-12-11 06:50:15
Either make pos global as in below snippet.要么将pos设为全局，如下面的代码片段所示。
Or set it dynamically within the function.或者在函数内动态设置它。
var left = document.getElementById("left"); left.onclick = moveLeft; var pos = 200; function moveLeft() { var box = document.getElementById("box1"); if (pos < 500) { pos = pos + 50 box.style.right = pos + "px"; } };
#container { width: 500px; height: 650px; background: black; position: relative; } #left { width: 250px; height: 650px; position: relative; background: transparent; } #right { left: 250px; top: 0px; width: 250px; height: 650px; position: absolute; background: transparent; } #box1 { width: 100px; height: 100px; right: 200px; background: red; position: absolute; } .grid { background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px); background-size: 50px 50px; height: 100%; position: absolute; width: 100%; }
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tetris</title> <link rel="stylesheet" href="styleSheets/main.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="js/jquery.1.js"></script> <script src="js/main.js"></script> </head> <body> <div id="container"> <div class="grid"></div> <div id="box1"></div> <div id="left" onclick="moveLeft()"></div> <div id="right"></div> </div> </body> </html>
解决方案3
1 已采纳 2019-12-11 06:57:59
The first answer is right, your pos variable revalue to 200 when you click your button everytime.第一个答案是正确的，每次单击按钮时，您的pos变量都会重估为 200。 So it is just from 200 to 250 everytime.it look like same everytime.所以每次只是从 200 到 250。它每次看起来都一样。 try like this:试试这样：
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.