Adjust the number of decimal places shown for a dynamically calculated value in JavaScript

JavaScript Code

<script type="text/javascript>
    function updateTotal() {
        document.getElementById('total').value = parseFloat(document.getElementById('cheque').value) + parseFloat(document.getElementById('cash').value);
    }
</script>

Input Fields

<input type="text" name="cheque" id="cheque" onChange="updateTotal()" />
<br>
<input type="text" name="cash" id="cash" onChange="updateTotal()" />

Result Field

<input type="text" id="total" readonly="readonly" name="total"  />

If I enter 100.100 in the cheque field and 200 in the cash field, the total is displayed as 300.1, but I want it to display 300.100. How can this be achieved?

Answer №1

Here's a suggestion:

document.add_new_report.total.value = ((document.add_new_report.cheque.value -0) + (document.add_new_report.cash.value -0)).toFixed(3);

Answer №2

To achieve the desired result, you should utilize the .toFixed() Method

Check this out for more information

function recalculatesum() {
document.update_report.total_amount.value = 
  (
    (document.update_report.credit.value -0) 
    + (document.update_report.debit.value -0)
    ).toFixed(3);
}

View a demo here

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

Leverage Mongoose setOnInsert feature by incorporating computed properties directly within the query

Whenever I attempt to utilize setOnInsert in Mongoose, the console indicates that computed properties cannot be used inside setOnInsert. The error message says: SyntaxError: Unexpected token [ findOneAndUpdate:{ "filter": hour[daySlot].time.tim ...

Adjusting the options in the subsequent dropdown menu based on the selection made in the initial dropdown menu

I am currently working on select boxes where values are dynamically added through an array. For example, if I have 4 values in the first select box, I only want to display 3 values in the second select box, excluding the value that has already been selecte ...

Ensure Quasar tooltip remains visible as long as the mouse is hovering over it

Utilizing the tooltip feature from to showcase text and image details. Is there a way to stop the tooltip from disappearing automatically when the mouse hovers over it? At the moment, the tooltip vanishes as soon as I move my mouse onto it. Your assista ...

Upon exiting the page, save the initial array in storage. However, the back button will load the last committed array

Currently, I have a feature on my website where users can filter articles based on their category. When the user selects the "ideas" filter, it creates a new array called "ideasFiltered" and stores it in the "filteredArticles" state. This works perfectly w ...

Transform spaces into %20 from an HTML input field by utilizing JavaScript or jQuery

Hi there, I'm encountering an issue with the input field on my website where users can enter search terms. I am currently extracting the user's input value and adding it to a URL string. jQuery("#searchButton").click(function(){ var simpl ...

Transforming JSON into Excel format with Azure Function and storing it in blob storage

Is there a way to store the Excel file generated by this JavaScript code in a blob storage? I'm looking for a solution similar to fs.safeFileSync. Any ideas on how to achieve this? const fs = require('fs'); var json2xls = require('json2 ...

A beginner's guide to crafting a knex query with MySQL language

Within MySQL Workbench, I currently have the following code: USE my_db; SELECT transactions.created_at, price FROM transactions JOIN transactions_items ON transactions.id = transactions_items.transaction_id JOIN store_items ...

What are the steps involved in generating and implementing dynamic hierarchical JSON data structures?

I am currently creating a dynamic diagram using d3.js that incorporates hierarchical data. The goal is to make it interactive so that users can manipulate the hierarchy by adding or removing data values and children. I'm wondering if there is a way to ...

What strategies can be used to steer clear of overhyped products after adjusting state?

I have a function that retrieves data from Firebase. After getting the data, I want to set it into a state. So, I create an array and push all the data into it. Then, I update my state with this array. However, when I log or render this state, I encounter ...

Issues with recursive functions in Javascript

I'm currently facing a challenge with javascript recursion. Below is the snippet of code that I am having trouble with: _parseJson: function($obj, $json_arr) { for (i = 0; i < $json_arr.length; i++) { var $el = document_creator.create ...

What causes jQuery to not work correctly during keydown events?

I've been working on this external jQuery code: jQuery(document).one('keydown', 'g',function (evt){ if ($("#tb").html() == "0") { $("#tb").html("Testing the chicken.") } else {$("#tb").html("Chickens fart too." ...

The React Modal component seems to be malfunctioning within the context of Nextjs

Out of the blue, this issue popped up and I'm puzzled about why it's happening. I have two modals (with different names) that are identical in structure but only one is functioning properly. Both modals use the React-Modal library. The first moda ...

Automatically minimizing dropdown when a new one is chosen/displayed (React)

I have a dropdown feature that I've implemented and it's working well, however, I would like to enhance it by automatically closing the previous dropdown when a user clicks on a different dropdown menu item. Currently, the dropdowns stay open aft ...

JavaScript image sorting function fails to sort multiple ID elements that match

Currently, I am working on a project to develop an image sorter using toggle buttons. However, I have encountered an issue where my function is only effective for the first image ID and not any others. Below is the JavaScript function in question: functi ...

Issue with exporting to Excel in AngularJS in Internet Explorer not functioning as expected

Having some trouble exporting data to Excel or PDF in IE, but it works fine in Chrome. Since most users will be using Internet Explorer, can someone please review my code and provide suggestions? Below is the Angular function I am using: scope. ...

Having trouble retrieving input values from forms in Angular 2?

Currently, I am using a modal form that loads information about my items when it is open. However, when I try to submit, all inputs are null except when the modal displays which works fine. <div id="modal1" class="modal"> <form #formData=' ...

Tips for making a DIV span the entire width of a page when it is within a column with the Bootstrap class 'col-md-6'

I'm having a little trouble arranging divs next to each other on a page. Specifically, I want to ensure that if there is only one instance of the col-xs-12 col-md-6 div class on the page, it should take up the full width (100%) instead of just 50%. Th ...

Unable to conceal element if it is devoid of content

<div id="web-link" class="infoline"> <i class="fa fa-link fa-2x fa-fw coloriconfa"></i> <a href="<?=$data['post']['url']?>" target="_blank"><?=$data[ ...

Show every instance that falls between two substrings in a given string using React

I am grappling with extracting data directly from a div that contains over 25 pages of repetitive information. The content usually follows this pattern: var first = "Your Name is: name Your Age is: age Your email is: email....Your Name is: name Your A ...

Angular 2 dropdown list that allows users to add a personalized value in the HTML code

Here is the scenario I am dealing with We are displaying a fixed dropdown list to the user For example, a dropdown list has 4 options such as apple, orange, grape, pineapple and 'create your own' If the user is not satisfied with the provided ...