[英]when i run .onclick, it runs once, and then it doesnt work again
据我了解，.onclick 每次单击按钮时都应该起作用，但是这只起作用一次。 到目前为止，这是我的代码
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>
就像我说的，它有效，但只有一次，它将框向左移动一格，但直到 5 格后才停止。 请帮忙...
那是因为您的pos变量是在moveLeft函数中定义的。 每次执行该函数时， pos始终为 200。在moveLeft函数之外定义它。
要么将pos设为全局，如下面的代码片段所示。
或者在函数内动态设置它。
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>
第一个答案是正确的，每次单击按钮时，您的pos变量都会重估为 200。 所以每次只是从 200 到 250。它每次看起来都一样。 试试这样：
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";
}
};
Javascript 按钮在页面加载时自己运行一次点击事件，点击时不起作用
[英]Javascript button runs the click event itself once when the page is loaded and doesnt work when clicked
为什么我把 this.onclick=' '; 放在 function 运行一次？
[英]Why does the function run once when I put this.onclick=' ';?
链接单击上的 Javascript 代码仅运行一次，我希望每次单击链接时都运行它
[英]Javascript code on link click runs only once, I want to get it run everytime when link is clicked
表单一次上传了一个文件，但是当我再次上传同一文件时，它不适用于同一文件
[英]Form uploads a file once, but it doesn't work on the same file when I upload the same file again
为什么onsubmit不起作用，并且如果我在控制台中调用该函数，它将运行？
[英]Why the onsubmit doesnt work and if I call the function in the console it runs?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.