Ways to limit Javascript math results to two decimal points and erase previous output in one go

Working on a JavaScript multiplication task. The input provided is multiplied by 0.05.

The JavaScript code successfully multiplies the input number by 0.05, but encounters some issues:

  1. The calculated value should be rounded to two decimal points. For example: 3284.40 instead of 3284.40000000000003
  2. The previous output should automatically clear when a new calculation is performed.

decimal

<script>
    function doMath() {
    var numOne = document.getElementById('num1').value;
    var numTwo = document.getElementById('num2').value;
    var theProduct = 0.05 * parseInt(numTwo);
    var p = document.getElementById('theProduct');
    p.innerHTML += theProduct;
    document.getElmentById('doMath').innerHTML='';
    }
</script>
    <input id="num1" type="hidden" name="num1" value="0.05" readonly><br> Value:<br>
    <input id="num2" type="text" name="num2">
    <br><input type="button" value="Convert" onclick="doMath()" />
    </div><div id="theProduct">$</div>

For an input value of 5688, the expected output is 3284.40, however the actual output includes additional decimal places (3284.40000000000003).

Upon clicking "Convert" multiple times, the expected output is 3284.40, but the actual output doesn't clear properly and results in incorrect values (284.40000000000003284.40000000000003)

Answer №1

If you want to handle decimal points, try using this method

function roundNum(num, dec = 2) {
    return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
}

Next, let's update the content:

document.getElementById('theProduct').innerHTML = '$';

To display the new content:

document.getElementById('theProduct').innerHTML = '$' + parseFloat(result);

Make sure 'result' contains the value from your previous calculation.

If you need to add it to the previous result:

var el = document.getElementById('theProduct');
el.innerHTML = '$' + (parseFloat(el.innerHTML) + result);

Feel free to make any adjustments and enjoy experimenting! :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing append and remove to modify HTML forms

Currently, I am working on a WordPress project that requires the use of append and remove for dynamically changing forms in HTML. I attempted to implement this functionality, but encountered some errors. The code snippet below provides a brief overview of ...

Browserify - combine external modules into a single bundle

I am a complete beginner in the world of browserify. I recently discovered this interesting module called peer-file, which allows for file transfer between two browsers. After reading the Usage section in its readme, I realized I needed to include the scri ...

Include jQuery from a different directory

A Closer Look at the Symptoms Encountering issues with jQuery file paths can lead to undefined errors. With jQuery located in different directories, such as the root or child directory, certain JavaScript files may fail to recognize its presence. The sol ...

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

I am currently utilizing CKEditor version 3.6 within my Asp.net MVC 3 Application. One of my tasks involves creating a Paint format option similar to Google Docs. I am looking to integrate this feature into CKEditor. Is there a way in CKEditor to transfe ...

What is the best way to dynamically link an Angular Material table with information pulled from the backend server

I am attempting to connect a mat-table with data from the backend API following this Angular Material Table Dynamic Columns without model. Below is the relevant content from the .ts file: technologyList = []; listTechnology = function () { ...

The issue of accessing the session before scripts are loaded arises when using VueJS alongside Firebase Authentication

Currently grappling with a project where I'm facing some challenges... I've opted for VueJS on the frontend and implemented Firebase Authentication for user login. I'm trying to determine the login status of a user by using firebase.auth(). ...

Modify the width of the progress bar in Bootstrap using AngularJS

I'm new to AngularJS and I'm attempting to dynamically update the width of a progress bar based on changes in my controller. Here is what I currently have: <span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span> <div ...

Verify if the array entries match

Within my select element, I populate options based on an array of values. For example: [{ name: 'A', type: 'a', }, { name: 'B', type: 'b', }, { name: 'B', type: 'b', }, { name: &apos ...

Separate each item in the list and display them across multiple pages within a table

I'm looking to display a list of 37 items across four separate pages within a table. Can anyone suggest a way to split these items and showcase them in four different pages using either javascript or vue.js? ...

Object.assign versus the assignment operator (i.e. =) when working with React components

Just a quick question: I've come across some answers like this one discussing the variances between Object.assign and the assignment operator (i.e. =) and grasp all the points made such as object copying versus address assignment. I'm trying to ...

How can I display the console log output from JavaScript on an HTML webpage?

If I have a JavaScript function that logs its output in the console using console.log(), is there a way to then export that result into the HTML console? Appreciate any advice on this. ...

Loop through data and use jQuery to insert it into the server

I am encountering an issue with my code as I attempt to insert data from a loop; unfortunately, I keep getting the error message "Uncaught TypeError: Illegal invocation". window.items = ''; _.forEach(cart.items, function(n, key) ...

Can the w regular expression pattern be modified to include special characters like é? If not, what other options are available?

Imagine having a regular expression that appears as follows: \w+ In this case, the string "helloworld" would be accepted: helloworld However, "héllowörld" would not pass the test: héllowörld The regex will stop at é (and also break atö) ev ...

Is there a way to disable or deactivate all jQuery functions at once?

I have developed an application with push state functionality and it is running smoothly. However, I am facing an issue where my jQuery functions are being triggered multiple times in certain cases. This happens because every time I call push state, the sp ...

The header() function triggers automatic page redirection instead of waiting for the form to be submitted

When I created a form that automatically sends an email upon submission, my goal was to direct the user to a thank you page after the email is sent. In my search for a solution, I stumbled upon the header() function in php and attempted to use it with the ...

By default, make the initial element of the list the selected option in an AngularJS select input

I'm running into an issue with setting the first element in my ng-repeat list within a select input. Here is the code snippet causing the problem: <div> <span >OF</span> <select ng-model="eclatementCourante.ordreFabricationId" n ...

What is the best way to navigate through a webpage to find a specific folder and show its contents on the page?

My goal is to design a webpage where users can browse their computer for a specific folder, select it, and have its content displayed on the webpage. I am fairly new to creating pages, but I want to develop a platform where you can easily find and view f ...

Ensure that each function is completed before proceeding to the next one

I've encountered an issue with my react app. After a user submits a form, I need a modal to open and the user's response to be stored in state. Then, based on this response, I have to execute some business logic before finally submitting the form ...

Disabling ESLint errors is not possible within a React environment

I encountered an eslint error while attempting to commit the branch 147:14 error Expected an assignment or function call and instead saw an expression @typescript-eslint/no-unused-expressions I'm struggling to identify the issue in the code, even ...

When using Vue.js, the v-bind:class directive can be applied when an array is present and contains a specific

In my current project with Laravel and Vue.js, I am dealing with the task of creating multiple users. To accomplish this, I am constructing an array of users and populating all the necessary fields in order to store them in a database table. Once all field ...