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>

score 0 · Answer 1 · answered May 08 '18 at 17:04

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>

How to prevent js animation from happening again

1 Answers1