I am encountering issues with the text box summing as it is providing me with

Hey everyone, I hope you're all having a good morning. I'm facing an issue with 4 text boxes that should be summed up and the total displayed in 1 text box. However, instead of getting the correct total value, I seem to be getting something else which is not right. I suspect it might be due to parsing errors. Any assistance on this matter would be highly appreciated. Below you can find my code along with a screenshot showing the incorrect total result: Check out this picture for reference

Thank you in advance,

    <script type="text/javascript">
function myFunction() 
{

    var v1 = form1.txtCu2Row.value;
    var v2 = form1.txtCu3Row.value;

    var v3 = v1 + v2

    var v4 = form1.txtCu4Row.value;
    var v5 = form1.txtCu5Row.value;

    var v6 = v4 + v5



    form1.txtTotalCuAB.value = parseInt(v3) + parseInt(v5);


}

Answer №1

Using the parseInt function is crucial when retrieving a value, such as from an input field, because the returned data is in string format. Without converting it into an integer using parseInt, mathematical operations cannot be performed on the variable.

Once the value is parsed, it becomes an integer and can then be utilized for calculations, ensuring that the code functions correctly.

Implement this method to achieve the desired outcome.

function myFunction() 
{

    var val1 = parseInt(form1.txtCu2Row.value);
    var val2 = parseInt(form1.txtCu3Row.value);

    var total1 = val1 + val2;

    var val3 = parseInt(form1.txtCu4Row.value);
    var val4 = parseInt(form1.txtCu5Row.value);

    var total2 = val3 + val4;

    form1.txtTotalCuAB.value = total1 + total2;

}

If you want a more concise version eliminating unnecessary variables, consider this approach.

function myFunction() 
{

    var val2 = parseInt(form1.txtCu2Row.value);
    var val3 = parseInt(form1.txtCu3Row.value);

    var val4 = parseInt(form1.txtCu4Row.value);
    var val5 = parseInt(form1.txtCu5Row.value);

    form1.txtTotalCuAB.value = val2 + val3 + val4 + val5;

}

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

Exploring nested objects and arrays with Plunker - extracting their values

I have retrieved two arrays, each containing nested objects, from API endpoints. One array (preview) consists solely of numbers. For example: [{ obj1:[1, 2], obj2:[3, 4] }] To obtain strings associated with IDs, I made another call to a different en ...

Converts date format from RSS feed to the "time.ago" format

I am currently working on creating an RSS feed webpage and RSS answer which includes a date formatted as "Thu, 15 Aug 2013 12:42:05 -0700". I would like to change this format to something like "12 minutes ago". I have attempted using , however it does no ...

Deliver JSX components that match one or more keys in the array of strings

Seeking assistance and guidance here. It seems like I might be overlooking something obvious. I am attempting to create a component that accepts either a string or string Array string[] as a property. const ComponentThatReturnsElement = (someElementName) = ...

A Smarter Approach to Updating Text Dynamically with JavaScript and Vue

Currently, I am utilizing Vue to dynamically update text by using setInterval() in combination with a data property. The method I have in place is functional, but I am curious if there exists a more efficient way to optimize it. Is the current code as stre ...

What is the most effective approach - should we use nested functions or is there a better

Do both of my examples have the same functionality, considering that I'm handling errors by terminating with res.json(400, err)? Also, I want to confirm that in my second example, the second async.each always runs after the first one, so is it safe to ...

Images are failing to render on Next.js

Hello there! I am facing an issue while working on my Next.js + TypeScript application. I need to ensure that all the images in the array passed through props are displayed. My initial approach was to pass the path and retrieve the image directly from the ...

Generate a list item that is contenteditable and includes a button for deletion placed beside it

I am attempting to create a ul, where each li is set as contenteditable and has a delete button positioned to the left of that li. My initial attempt looked like this: <ul id='list'> <li type='disc' id='li1' cl ...

Unexpected outcomes arise when parsing headers from a file-based stream

Currently, I am in the process of creating a small parser to analyze some log files using node streams (more specifically io.js). I have been referring to the documentation for unshift to extract the header. While I can successfully divide the buffer and ...

The ngCordova FileTransfer is not providing the HTTP status code when retrieving a file from an FTP server

I am attempting to retrieve a file from an FTP server using Cordova. To accomplish this, I have installed the ngCordova and Filetransfer plugins. Below is the snippet of code I am working with: angular.module('TestApp', ['ionic', &apos ...

Confirming the data entry format

I am currently utilizing the RobinHerbots/Inputmask plugin to mask telephone input. I am interested in finding out how I can implement input validation to ensure that the user has entered accurate information. Thank you! <form> <input ty ...

PostMan gives me an error when I attempt to send an image file to NodeJS using multer (req.file is undefined)

After encountering issues with saving image files to the server using multer-s3, I attempted to use multer and s3Client instead. Unfortunately, I faced similar challenges as req.file or req.files from the multer-s3 middleware continued to return undefined. ...

Please rewrite the following sentence: "I am going to the store to buy some groceries."

As I navigate through my styled HTML page, an interesting sequence of events unfolds. When the Create New List button is clicked, a pink div emerges, contrasting with the orange hue of the All Lists div. At this moment, a new user has joined but hasn' ...

Replacing Data in Lists and Arrays

When fetching data from the database, I store it in the variable $groups. Each entry has a different created_at timestamp. Before returning the data to the view, I want to overwrite the created_at field in the collection and format it nicely using ->di ...

Tips for creating fonts that adjust depending on the length of characters

Is there a way to adjust the font size of a paragraph based on the space available in its containing div, depending on the length of characters? For instance: p{ font-size:15px; } <div class="caption"> <p>Lorem ipsum dolor sit amet, consect ...

Tips for developing a swift autocomplete functionality within the server-side operations

As a beginner in data structures, I set out to create a city lookup and autocomplete feature on the back-end of my nodeJS express server. Initially, I loaded an array of around 20,000 cities into memory and allowed my client app to search for a city via th ...

Is there a method to extract the y value for a specific x value that is not part of the current data set in a Chart.js graph

I have a set of data points like { x: 5, y: 10 }, { x: 10, y: 15 }, { x: 20, y: 25 }. With Chart.js, I can easily create a chart based on these points. Is there a method to retrieve the y value for a specific x value, such as 13, from the rendered chart? ...

Element dynamically targeted

Here is the jQuery code I currently have: $('.class-name').each(function() { $(this).parent().prepend(this); }); While this code successfully targets .class-name elements on page load, I am looking to extend its functionality to also target ...

Load JavaScript files in order within the <body> tag and trigger a callback function when all files have

Currently, my website (which is actually a Cordova/Phonegap app) has the following scripts in the <head>: <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="appPolyfills.js"></script> ...

How can you verify the value of a disabled HTML input element in TestCafe using Typescript?

TestCafe Typescript - how to verify the value of a disabled HTML input element? Despite being disabled for user interaction, I want to ensure that this element still holds the anticipated value. example public async checksomething(text: string) { co ...

Include a new route in the Vue.js router dynamically during runtime

I am in the process of developing an application and I want to incorporate extensions into it. These extensions will have their own Vue components, views, and routes. Instead of rebuilding the entire app, I am looking for a way to dynamically add these new ...