[英]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.