How do I make a element move back and forth with javascript?

Question

So what I have is a black bar that I want to move up and down continuously until I click the stop button. At the moment the black element doesn't move at all, and I'm sure the stop button wouldn't do it's job if it did. I would like the black bar to bounce up and down when it hits the edges of its container (the blue element). Eventually i would like to create a game where you have to stop the black bar inside the green zone and each time you do it correctly, it will get faster and the green area will move randomly, but one step at a time I guess. I am quite knew to java script and struggle to think of ways that I can make it work. My code currently stands at this

function load() {
  var barMove = document.getElementById("small-bar");
  var pos = 600;
  var go = setInterval(start, 5);

  function start() {

    if (pos == 0) {
      pos--;
      barMove.style.top = pos + 'px';
    } else if (pos == 600) {
      pos++;
      barMove.style.bottom + 'px';
    }



  }
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

#container {
  position: relative;
  background-color: brown;
  height: 800px;
  width: 800px;
  margin: 0 auto;
  margin-top: 75px;
}

#big-bar {
  position: relative;
  height: 600px;
  width: 200px;
  background: blue;
  left: 300px;
  top: 100px;
  overflow: hidden;
  border-radius: 20px 20px 20px 20px;
}

#medium-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 2;
  position: absolute;
  height: 100px;
  width: 200px;
  background: green;
  top: 200px;
}

#small-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 3;
  position: absolute;
  height: 50px;
  width: 200px;
  background: black;
  top: 600px;
}

#btn-go {
  position: absolute;
  top: 20px;
  right: 600px;
  padding: 5px 20px;
  border-radius: 10px;
  background: gold;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}

#btn-stop {
  position: absolute;
  top: 20px;
  right: 75px;
  padding: 5px 20px;
  border-radius: 10px;
  background: red;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}

<div id="container">

  <div id="big-bar">

    <div id="medium-bar"></div>
    <div id="small-bar"></div>
  </div>

  <input id="btn-go" type="button" value="Go !" onclick="load()">
  <input id="btn-stop" type="button" value="Stop !" onclick="clearInterval(go)">

</div>

The only error i get is when i click the stop button i get this : Untitled-1.html:88 Uncaught ReferenceError: go is not defined at HTMLInputElement.onclick (Untitled-1.html:88) — DrSaggySock, Sep 17 '18 at 20:03
Well than you have a problem where your `go` is not defined when you click on it since it is defined inside of a block scope and is not global. — epascarello, Sep 17 '18 at 20:05

epascarello · Answer 1 · 2018-09-18T18:47:32.143

Your logic says this... If pos is zero than subtract one from pos. Else if pos is equal to 600 add one. Other than than, it will not adjust it.

Should be something like

var dir = 1;
var pos = 0;
function start () {
  if (pos>600) dir=-1
  else if (pos<0) dir=1
  pos += dir
  barMove.style.top = pos + 'px';
}

Edited with it working....

var interval;

function load() {
  var barMove = document.getElementById("small-bar");
  var pos = 600;
  interval = setInterval(start, 5);

  var dir = 1;
  var pos = 0;

  function start() {
    if (pos > 600) dir = -1
    else if (pos < 0) dir = 1
    pos += dir
    barMove.style.top = pos + 'px';
  }

}

function stop() {
  window.clearInterval(interval);
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

#container {
  position: relative;
  background-color: brown;
  height: 800px;
  width: 800px;
  margin: 0 auto;
  margin-top: 75px;
}

#big-bar {
  position: relative;
  height: 600px;
  width: 200px;
  background: blue;
  left: 300px;
  top: 100px;
  overflow: hidden;
  border-radius: 20px 20px 20px 20px;
}

#medium-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 2;
  position: absolute;
  height: 100px;
  width: 200px;
  background: green;
  top: 200px;
}

#small-bar {
  border-radius: 20px 20px 20px 20px;
  z-index: 3;
  position: absolute;
  height: 50px;
  width: 200px;
  background: black;
  top: 600px;
}

#btn-go {
  position: absolute;
  top: 20px;
  right: 600px;
  padding: 5px 20px;
  border-radius: 10px;
  background: gold;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}

#btn-stop {
  position: absolute;
  top: 20px;
  right: 75px;
  padding: 5px 20px;
  border-radius: 10px;
  background: red;
  font-family: sans-serif;
  font-size: 1.8em;
  color: #424242;
}

<div id="container">

  <div id="big-bar">

    <div id="medium-bar"></div>
    <div id="small-bar"></div>
  </div>

  <input id="btn-go" type="button" value="Go !" onclick="load()">
  <input id="btn-stop" type="button" value="Stop !" onclick="stop()">

</div>

I understand what you're saying but i cant get your code to work. I also dont understand what the dir variable is achieving. Forgive as i'm new to this — DrSaggySock, Sep 18 '18 at 18:42

How do I make a element move back and forth with javascript?

1 Answers1