How to prevent js animation from happening again
Question
So I'm trying to make this animation where the side black rectangles "move aside" when I click on of the buttons. However when I click on the button second time, it behaves all weird and stuff, the rectangles on sides start to appear and disappear rapidly. I tried to prevent it by setting the onlick attribute of the buttons to empty after the animation function finishes, but it doesn't seem to work. Any ideas on how I can set it to that it runs only once? Thanks
var W = document.body.clientWidth; function move() { var left = document.getElementById("left"); var right = document.getElementById("right"); var pos = 0; var id = setInterval(frame, 1); function frame() { if (pos > W/3) { clearInterval(id); document.getElementsByClassName("NavLink").onclick = ""; } else { pos++; left.style.left = -3*pos + 'px'; right.style.right = -3*pos + 'px'; } } }
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ overflow: hidden; } nav{ width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } nav h1,a{ color: black; font-family: Helvetica; margin-top: 2vw; margin-bottom: 2vw; } nav h1{ margin-bottom: 6vw; } aside{ position: absolute; width: 33vw; height: 100vh; background-color: black; } #left{ left: 0; } #right{ right: 0; }
<!DOCTYPE html> <html> <head> <title>Paggo</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="styllo.css"> <script type="text/javascript" src="scriptto.js"></script> </head> <!-- ########################################################### --> <body> <div id="grid"> <aside id="left"></aside> <aside id="right"></aside> <nav> <button onclick="move()" class="NavLink"> Link </button> <button onclick="move()" class="NavLink"> Link </button> <button onclick="move()" class="NavLink"> Link </button> <button onclick="move()" class="NavLink"> Link </button> </nav> </div> </body> </html>
1 answers
solution1
0 2018-05-08 17:04:37
getElementsByClassName() returns an HTMLCollection . You cannot set onclick directly on this collection. Instead, you should loop over each element in the collection .
This only solves the problem of being able to run the animation again after it has finished. I did not fix the bug of being able to start the animation again after it has already started.
var W = document.body.clientWidth; function move() { var left = document.getElementById("left"); var right = document.getElementById("right"); var pos = 0; var id = setInterval(frame, 1); function frame() { if (pos > W/3) { clearInterval(id); var navLinks = document.getElementsByClassName("NavLink"); for (var i = 0; i < navLinks.length; i++) { var navLink = navLinks[i]; navLink.onclick = ""; } } else { pos++; left.style.left = -3*pos + 'px'; right.style.right = -3*pos + 'px'; } } }
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ overflow: hidden; } nav{ width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } nav h1,a{ color: black; font-family: Helvetica; margin-top: 2vw; margin-bottom: 2vw; } nav h1{ margin-bottom: 6vw; } aside{ position: absolute; width: 33vw; height: 100vh; background-color: black; } #left{ left: 0; } #right{ right: 0; }
<!DOCTYPE html> <html> <head> <title>Paggo</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="styllo.css"> <script type="text/javascript" src="scriptto.js"></script> </head> <!-- ########################################################### --> <body> <div id="grid"> <aside id="left"></aside> <aside id="right"></aside> <nav> <button onclick="move()" class="NavLink"> Link </button> <button onclick="move()" class="NavLink"> Link </button> <button onclick="move()" class="NavLink"> Link </button> <button onclick="move()" class="NavLink"> Link </button> </nav> </div> </body> </html>
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.