Javascript variable update on input

Question

I have a function where I'm trying to update one parameter based on the value of a range input

    a.start = function () {
        var t = 50;
        var rangeInput = document.getElementById('speed');
        rangeInput.addEventListener("change", function () {
        t = document.rangeInput.value;});
        setInterval(function () {
            a.update();
            a.draw();
        }, t );

    };

And honestly I'm getting frustrated, because I can't get this function to work dynamically. It somehow works simply with

  a.start = function () {
            var t = document.getElementById('speed');
            setInterval(function () {
                a.update();
                a.draw();
            }, t );

       };

but only after I refresh the page. Honestly, my understanding of javascript is rather poor, I know it can be done using AJAX, but do I have to do it for such a simple thing? Any tips appreciated. HEre's html:

 <form>
                <label for="speed">
        <input id="speed" type="range" name="points" min="10" max="2000" >Animation speed</label>
</form>

What is the purpose of the setInterval() call? And, why would you set the range's change callback in the start function instead of doing it when the DOM is loaded? — Scott Marcus
– Scott Marcus, Commented May 29, 2017 at 23:26
Once setInterval has the t value it won't change whether you change t or not. In your event listener you can destroy the interval and recreate it with the new t value and it should work. — aaronw
– aaronw, Commented May 29, 2017 at 23:31

Scott Marcus · Accepted Answer · 2017-05-29 23:46:56Z

You need to cancel any running timer before you start a new one with a new time associated with it. Also, your code needs to be separated a bit.

// Place all this code at the bottom of the code, just before the </body>

var rangeInput = document.getElementById('speed');
var t = 500;  // Default
var timer = null; // Reference to the interval timer

rangeInput.addEventListener("change", function(){
  t = rangeInput.value;
  
  // Cancel any previous timers
  clearInterval(timer);
  
  // Do the animation every t milliseconds
  timer = setInterval(function(){
    // Commented out only because we don't know what "a" is:
    //a.update();
    //a.draw();
  
    // For debugging:
    console.log(t);
  }, t);
});

<form>
  <label for="speed">
  <input id="speed" type="range" name="points" min="10" max="5000" >Animation speed</label>
</form>

You could also do this using setTimeout() instead of setInterval():

// Place all this code at the bottom of the code, just before the </body>

var rangeInput = document.getElementById('speed');
var t = 500;  // Default
var timer = null; // Reference to the interval timer

rangeInput.addEventListener("change", animate);

function animate(){
  clearTimeout(timer);

  t = rangeInput.value;
  
  // Commented out only because we don't know what "a" is:
  //a.update();
  //a.draw();
  
  // For debugging:
  console.log(t);
  
  // Do the animation every t milliseconds. Call the function recursively
  timer = setTimeout(animate, t);
}

<form>
  <label for="speed">
  <input id="speed" type="range" name="points" min="10" max="5000" >Animation speed</label>
</form>

Collectives™ on Stack Overflow

Javascript variable update on input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related