when i run .onclick, it runs once, and then it doesnt work again
Question
to my understanding, .onclick, should work each time I click the button, however this is only working once. 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. please help...
3 answers
solution1
1 2019-12-11 06:49:38
That is because your pos variable is defined inside the moveLeft function. Every time the function is executed, the pos is always 200. Define it outside the moveLeft function.
solution2
1 2019-12-11 06:50:15
Either make pos global as in below snippet.
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>
solution3
1 ACCPTED 2019-12-11 06:57:59
The first answer is right, your pos variable revalue to 200 when you click your button everytime. So it is just from 200 to 250 everytime.it look like same everytime. 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";
}
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.