CODEWITHSUNDEEP
javascripthtmlincrement
User1010
User1010

Reputation: 111

Increment Value over a Duration on Update

I'm trying to make a script to increment a number to the selected number on every select change. For example, if the user selects 30, I want the number to increase at a rate of 30 values per second so it reaches 30 in one second.

I don't know what went wrong, but when executing this script, it only increments on the first page load but with no value change.

https://jsfiddle.net/User1010/b7znc3fL/

var valueElement = document.getElementById('value');

var option = document.getElementById('option');

var start     = 0;
var end       = parseFloat(option.innerHTML);
var duration  = 1000; // In milliseconds (divide by 1000 to get seconds).
var framerate = 50;    // In milliseconds (divide by 1000 to get seconds).

var toAdd = ( ( end - start ) * framerate ) / duration;

var interval = setInterval(function() {
var currentValue = parseFloat(valueElement.innerHTML);

if (currentValue >= end) {
  clearInterval(interval);
return;
}

valueElement.innerHTML = (!isNaN(currentValue) == true ? (currentValue +   toAdd).toFixed(2) : toAdd);
 }, framerate);

Upvotes: 1

Views: 474

Answers (2)

Marvin
Marvin

Reputation: 953

You may be overthinking this task. I also found there were errors and things to change in the console and the JSFiddle. For example, there is no element with the name option.

https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-animation/p/animating-dom-with-setinterval https://www.khanacademy.org/computer-programming/spin-off-of-challenge-stopwatch/6144204027232256

Let's start with something basic: A Stopwatch

  1. Define variables for better convenience, for better, more common practice, and for higher efficiency
    • A variable that can be called counterEl initializing the span element using document.getElementById() on the id 'daily'.
    • A variable that can be called selectEl initializing the select element using document.getElementById() on the id 'value'.
    • A type null variable that can be called currentTime which will turn counterEl into a float data type by calling parseFloat() on countEl.textContent.
    • A type null variable called stopwatch that will be initialized when you use setInterval.

I also used the linking Stack Overflow question for help

  1. Add an event listener to the select element for every time its value changes like so: selectElement.addEventListener("change", myFunction);

  2. Create a global function resetStopwatch() {}

    • Set countEl.textContent to 0.
    • Just for good measure, set currentTime to 0 as well.
    • stopwatch = window.setInterval(countUp, 1000);

  3. Create the global countUp function

Everything here is explained in the comments.

// Turns the value into a float so it can be incremented and compared (textContent is a string)
currentTime = parseFloat(seconds.textContent);
// Add 1 second every time function is called
seconds.textContent = currentTime + 1;
if (seconds.textContent >= selectElement.value) {
window.clearInterval(stopwatch); // Stops the stopwatch if the  seconds 
reached the selected option 
console.log("My time has been cleared");
}

Now let's slightly tweak this to make it a 'reverse stopwatch'

In the setInterval, you want it to increment that many in one second, so you would change the invocation to

 stopwatch = window.setInterval(countUp, 1000/incrementRate.value);

Use my JS Fiddle for guidance in solving your problem: https://jsfiddle.net/404_Error/z0t4spob/

Upvotes: 2

JRW2252
JRW2252

Reputation: 83

Looks like you just need to bind a change event handler to your select/option. Reference MDN's Event documentation on adding this to your script to handle the changes and update of the value.

Just a heads up, if you want to use a framework like jQuery, the process and script can be simplified drastically.

Upvotes: 1

Related Questions