Decimals counter React + JS

391
August 16, 2017, at 9:54 PM

so i created a counter from 0 to given number, but i have problems with decimals. i mean - for example - it's supposed to be counted from 0 to 4.5, but it stops at 4.1, it's counting from 0 to 5.7 (0.1, 0.2, 0.3 ..... 5.7), but it stops at 5.1 etc. and i really can't figure out where is the mistake in the code. Maybe someone can help?

the part of the code:

if (!this.valueCount){
      this.value = 0;
      let valueInterval = setInterval(() => {
        if (this.value === this.value1){
          clearInterval(valueInterval);
          this.valueCount = false;
        } else if (this.value < this.value1){
          this.value++;
          this.valueCount = true;
        } else {
          this.value--;
          this.valueCount = true;
        }
        this.value =+ (this.value + 0.1).toFixed(1);
        this.base.querySelector('#value .values').innerHTML = this.value;
      }, 50);
Answer 1

You're incrementing value the wrong way, increment it by 0.1 like this :

let value = 0, 
    value1 = 4.5; 
     
let valueInterval = setInterval(() => { 
  if (value === value1) { 
    clearInterval(valueInterval); 
  } else if (value < value1) { 
    value += 0.1; 
  } else { 
    value -= 0.1; 
  } 
   
  console.log(value.toFixed(1)); 
}, 500);

Rent Charter Buses Company
READ ALSO
How to do Autocomment and put new line after closing tag while using dreamweaver and visual studio?

How to do Autocomment and put new line after closing tag while using dreamweaver and visual studio?

some time i watch tutorials and see when they put closing tag comments automatically genrates and the new line tooI try to find the solution and find the extension name Emmet but could not get the result please help me

277
Loader-wrapper stuck when I upload the LP to the host

Loader-wrapper stuck when I upload the LP to the host

I have a problem concerning a landing page I want to upload to my hostBefore entering the landing page, a loader shows up then you get redirected to the landing page, however in my case, the loader is stuck and cannot redirect

280
Dynamical height of List element brings total Chaos

Dynamical height of List element brings total Chaos

I want to have some list elements that got a dynamically adjusting height via css

256
Mime type error when Importing CSS in Stackblitz

Mime type error when Importing CSS in Stackblitz

I would include material design in my Angular projectI'm using Stackblitz online IDE

577