Is there a better way? or is it a wild goose chase

JavaScript
1

HI all
I would appreciate your thoughts on how best to achieve this?
Anim works, but lacks control, as yet.
Mainly, Am I on the right track, or should I start again?

Javascript below is to be run on a esp8266 websocket AP mode. (Not completed yet)
The plan is to sync it to the walking floor in a semi, 4 different trailers so I can view it on a phone and stop it in the correct place. it only needs a hall effect sensor at each end of travel on one (1) board, the rest I can workout in software (I hope).

Need ideas for:
1: When the 3 boards move together (up) the speed should be roughly 1/3 of the individual (down) speeds.

2: A starting idea for seeding the Sync pulse from esp8266. end to end each in direction. When board is UP, then when board is DOWN.

3: And feel free to point out better solutions in the javascript.

4: anything potential problems I haven’t encountered yet.
especially the Sync bit that is where I’m coming unstuck cant change it once running??

Thanks for looking.

<html>
<style>
#myContainer {
  width: 140px;
  height: 300px;
  position: relative;
  background: lightgrey;
}
#board_1 {
  width: 30px;
  height: 80px;
  position: absolute;
  left: 15px;
  background-color: red;
}
#board_2 {
    width: 30px;
    height: 80px;
    position: absolute;
    left: 53px;
    background-color: blue;
}
#board_3 {
    width: 30px;
    height: 80px;
    position: absolute;
    left: 90px;
    background-color: green;
}

</style>
<body>

<p>
<button onclick="startMove()">Click Me</button>
<button onclick="changeIt()">push</button> // dont work
</p>

<div id ="myContainer">
<div id ="board_1"></div>
<div id ="board_2"></div>
<div id ="board_3"></div>
</div>

<script>
function startMove() {
  var elem1 = document.getElementById("board_1");
  var elem2 = document.getElementById("board_2");
  var elem3 = document.getElementById("board_3");
  var pos = 0;
  var pos_1 = 0;
  var pos_2 = 0;
  var reverse = 0;
  var speed = 5;
  var id = setInterval(frame, 15);

  function frame() {

    if (pos == 350) {
      clearInterval(id); // Safty turn OFF. redundant

    } else {
function changeIt(){speed = 40, document.write(speed)}; // dont work.
      if (reverse == 0){

        pos = pos + speed;

          if (pos >= 200){
                pos_1= pos_1 + speed;
                pos = 200;
              if (pos_1 >= 200){
                      pos_2 = pos_2 + speed;
                      pos_1 = 200;
                    if (pos_2 >= 200){
                           pos_2 = 200;
                           reverse = 1;
                          //     reverse = 1;
                  }
                }
             }

        // Board direction reversed here.
      }else{
        pos--;
        pos_1--;
        pos_2--;
          if(pos <= 0){
             reverse = 0;
           }
      }

      if (pos < 200){
      elem1.style.top = pos + 'px';
      //  elem.style.left = pos + 'px';
    }

if (pos_1 < 200){
      elem2.style.top = pos_1 + 'px';
    //  elem2.style.left = 53 + 'px';
    }
if (pos_2 < 200){
      elem3.style.top = pos_2 + 'px';
    //  elem3.style.left = 90 + 'px';
    }

    }
  }


}

</script>

</body>
</html>
2

Write it again.
Try to limit each function to a task only so you can organise your code.
This functions, “changeIt”, “frame” etc should be outside of “startMove” and called when required.

This code is a mess.
I hope you are not getting offended but it is unreadable.

I can see so many mistakes.
The function “changeIt” is declared based on an if/else condition but potentially called at any time.
(click event in your case )
Is like trying to use a screwdriver which has not been manufactured yet.

Please use a tool for indentation, spaces or tabs. I would not blame anyone for avoiding to read your code for this reason only.

3