Home>

javascript : Why won't the animation start?

This should have been an animation of a ball rolling down the road, depending on the parameters entered: vts (denoted as numberv numbert numbers). But it doesn't start. If you need clarification on the code, write.

train.onclick= function() {
  let start= date.now();
  var inputs= document.getElementById('numbers')
  var inputt= document.getElementById('number')
  var numbers= Number(input1.value);
  varnumbert= Number(input2.value);
  var sum= 30 * numbers /numbers * 1000; //This is the length of one step, to control the speed
  let timer= setInterval(function() {
    let timePassed= Date.now() -start;
    train.style.left= sum + 'px';
    if (timePassed > 2000) clearInterval(timer);
  }, thirty);
}
#train {
  width: 25px
  height: 25px;
  background: red;
  border-radius: 50%
  position: relative;
}
road {
  height: 10px;
  width: 50px
  background: #ba8dff;
  margin-top: 15px;
}
<img id="train"><h3>Distance</h3><input type='number' id='numbers' value="50" oninput="road.style.width= ${this.value}px;">px
<div id="road"></div><h3>Time</h3><input type='number' id='number' value="50"><h3>Speed</h3><input type='number' id='numberv' value="50">

what does 30numbers or numbert1000 mean? where are they in the code? why did you decide what to call variables from a number -is that right?

Алексей Шиманский2022-02-03 19:54:13

vts parameters are numbers numbers number

Александр Буланов2022-02-03 19:54:13

input1 is not defined

Алексей Шиманский2022-02-03 19:54:13

would you provide the correct code to start

Алексей Шиманский2022-02-03 19:54:13
javascript html css
  • Answer # 1 
    train.onclick= function() {
  let start= date.now();
  var inputs= document.getElementById('numbers')
  var inputt= document.getElementById('number')
  var numbers= Number(inputs. value);
  varnumbert= Number(inputt.value);
  var sum= 0; //<---Initial sum value
  let delta= 1; //<--------here you need to enter the correct data and formula from vts
  let timer= setInterval(function() {
    let timePassed= Date.now() -start;
    train.style.left= sum + 'px';
    sum += delta; //<------add delta to intervals
  }, thirty);
}
    #train {
  width: 25px
  height: 25px;
  background: red;
  border-radius: 50%
  position: relative;
}
road {
  height: 10px;
  width: 50px
  background: #ba8dff;
  margin-top: 15px;
}
    <!DOCTYPE HTML><html><body>  <img id="train">  <h3>Distance</h3>  <input type='number' id='numbers' value="2" oninput="road.style.width= ${this.value}px;">px
  <div id="road"></div>  <h3>Time</h3>  <input type='number' id='number' value="2">  <h3>Speed</h3>  <input type='number' id='numberv' value="2"></body></html>