1

I have a problem with this code. 4.9 never comes out, only 4.5 or 5.5. Could it be possible to spin up the decimals instead of the integers to reach 4.9?

let counts = setInterval(updated, 500);
let upto = 1.5;

function updated() {
    var count = document.getElementById("counter");
    count.innerHTML = ++upto;
    if (Number(upto.toFixed(1)) >= 4.9) {
        clearInterval(counts);
    }
}
Usitha Indeewara
  • 870
  • 3
  • 10
  • 21
userZolika
  • 51
  • 4

3 Answers3

1

You had two small but important issues that I fixed. Read the comments I put in the code snippet.

Updated: Use toFixed to show x count of decimals.

let counts = setInterval(updated, 10);
let upto = 70.1;
var count = document.getElementById("counter");

function updated() {
  // ++upto would never hit 88.5, it will hit 88.1 89.1 -> so we do += 0.1
  // Updated: Show only one decimal using toFixed()
  const _t = upto += 0.1
  count.innerHTML = _t.toFixed(1);
  // Changing upto to number again because toFixed converts it to string
  if (Number(upto.toFixed(1)) === 88.5) {
    clearInterval(counts);
  }
}
<p id="counter"></p>
Amini
  • 1,620
  • 1
  • 8
  • 26
1

First: do not increment by 1 (++upto === upto + 1). Second: You need to modify your clearInterval condition:

let counts=setInterval(updated, 10);
let upto=70.1;
function updated(){
    var count= document.getElementById("counter");
    count.innerHTML=upto + 0.1;
    if(Number(upto.toFixed(1))===88.5)
    {
        clearInterval(counts);
    }
}
Polina Shestakova
  • 71
  • 3
0

Use a from step to variables, and make sure to reset the curr value to a to value when it exceeds that max:

// Counter options:
const from = 0;
const step = 0.1;
const to = 4.9;
const speed = 100; // ms

// Counter:
const elCounter = document.getElementById("counter");
let itvCounts = null;
let curr = from;

const updateCounter = () => {

  curr += step;

  if (curr >= to) {
    clearInterval(itvCounts);
    curr = to;
  }
  
  elCounter.innerHTML = +curr.toFixed(1);

};

// Init:
itvCounts = setInterval(updateCounter, speed);
<span id="counter"></span>

Find more useful examples and implementations here:

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • This is great, it's going well, thank you very much. I have several of these counters on one page. However, if I change the word counter in the code to counter2, for example, one of them doesn't work. So for example, with 3 counters, only one will work. What should I change to get 3 of these counters on one page? – userZolika Nov 06 '22 at 10:46
  • @userZolikause For example here's one of the code from a link I suggested in action: https://jsfiddle.net/m4wetv2f/ For more info: https://stackoverflow.com/a/70746179/383904 – Roko C. Buljan Nov 06 '22 at 11:21
  • I tried this, it's almost good: jsfiddle.net/m4wetv2f The problem is that I want to go from 0 to 4.9, but it stops at 4. How should I fix the code? – userZolika Nov 06 '22 at 11:49
  • How can you make the last number not an integer, but e.g. 4.9? If I write it this way, 4 will be the last number displayed. – userZolika Nov 06 '22 at 13:21
  • @userZolika pretty simple, replace on line 4 and 5 parseInt with parseFloat. Here's an example: https://jsfiddle.net/L4ce07mo/ – Roko C. Buljan Nov 06 '22 at 17:27