Decimal tally in React using JavaScript

Question

Decimal tally in React using JavaScript

I'm struggling with my counter code that is supposed to count from 0 up to a given number, but it seems to have issues with decimals. For example, if it's set to count to 4.5, it stops at 4.1 or when counting from 0 to 5.7, it stops at 5.1. I've tried troubleshooting the code but can't seem to pinpoint where the mistake may be. Can anyone offer any help or guidance?

Here is the relevant 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);

javascript html css reactjs counter

Answer 1

Answer №1

The correct way to increment the value is by adding 0.1. Follow this code snippet:

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

Answer 2

The correct way to increment the value is by adding 0.1. Follow this code snippet:

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

Decimal tally in React using JavaScript

Answer №1

Similar questions

form data was not successfully submitted

The HTML form submission button fails to submit the form and instead just refreshes the page

What is the method for identifying the points where two faces of two bufferGeometryBox objects intersect?

Is it better to use Rollup for exporting individual components instead of lumping them all into one index.js

Problem with rendering Ionic v2 HTML in Angular 2

Error encountered in Webpack 5 module federation when attempting to dynamically load a remote module and a

A step-by-step guide on implementing auto increment functionality for each row in a Material UI table

The terser-webpack-plugin and uglifyjs-webpack-plugin are both powerful tools for optimizing

Position the navigation content slightly to the left and right using Bootstrap 5

"Arranging elements with identical class in a single column but on separate rows using CSS grid - a step-by-step guide

`The execution of a function within an arrow function does not yield the desired outcome`

Issue with toggleClass not functioning properly after receiving data from an AJAX call

Incorporating external CSS and JS files into your WordPress website

Is there a way to use lodash to convert an array into an object?

What is the best way to ensure the image is centered on smaller screens for responsive design?

The quickest method to modify the anchor element's class depending on the query string

Create a customized MUI select component with a label, all without the need for assigning an

The issue with React's useReducer is that it is not properly updating objects

Place unchangeable elements both preceding and following an input field

State in React Native Firebase is coming back as undefined