Adding Numbers in JavaScript

Question

Please advise how to ADD two numbers in JavaScript. I am not sure where I am going wrong here. Not clear how I need to convert string into integers or Numbers.

function add(){
"use strict";
        num1 = parseInt(document.getElementById("firstNumber")).value;
        num2 = parseInt(document.getElementById("secondNumber")).value;

parseInt(document.getElementById("result")).innerHTML =num1+num2;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="MyStyle.css" rel="stylesheet" type="text/css">

<script src="myEvents.js"> </script>
</head>

<body>

<form>
1st Number : <input type="text" id="firstNumber" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>



<input type="button" onClick="add()" Value="add" />


</form>

<p>Total: 
<div id="result"> 
<input type="text"/> </div>

Next time you have a question, break it down to only what is needed to reproduce the problem. I think with some basic debugging, you would have found the answer on your own. Use breakpoints in your code, console.log(), etc., to inspect values at each step of the way until you see what the issue is. — Brad
– Brad, Commented Sep 25, 2016 at 2:22

David · Accepted Answer · 2016-09-25 02:22:37Z

5

You're trying to parse the element as an int, and take the value of the int:

parseInt(document.getElementById("firstNumber")).value

Get the value from the element and parse that as an int:

parseInt(document.getElementById("firstNumber").value)

Also, parsing is unnecessary here (and doesn't really make sense when assigning to the property):

parseInt(document.getElementById("result")).innerHTML =num1+num2;

Just assign the property directly:

document.getElementById("result").innerHTML =num1+num2;

edited Sep 25, 2016 at 2:22

answered Sep 25, 2016 at 2:21

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

j08691 Over a year ago

Don't forget to point out everything wrong with parseInt(document.getElementById("result")).innerHTML too

Ry- · Accepted Answer · 2016-09-25 02:33:23Z

parseInt(document.getElementById("result")).innerHTML = num1 + num2;

This makes no sense. I’ll try to give an overview of the objects and functions you’re working with, because one or more of them seems to be being treated as a sort of magic.

Starting with elements:

var firstInput = document.getElementById("firstNumber");
var secondInput = document.getElementById("secondNumber");

document.getElementById is a function that takes a string, finds the element in your document with that id, and returns that element. Here, you’ve selected two <input> elements, which the above snippet assigns to firstInput and secondInput to distinguish them (<input>s) from numbers.

Each input has a value property, which is a string. Verify this in your browser’s console.

console.log(firstInput.value);  // whatever you typed in the first box
console.log(typeof firstInput.value);  // string

Onwards to parsing, then. parseInt is a function that parses a string into a number. You can try it out in your console, too:

var someString = "192";
var someNumber = parseInt(someString);

console.log(someNumber);  // 192
console.log(typeof someNumber);  // number

A quick type recap:

firstInput is an element
firstInput.value is a string
parseInt is a function that takes a string and returns a number

so you can use parseInt(firstInput.value) to get your first input’s value as a number. Writing that all out for both inputs,

var firstInput = document.getElementById("firstNumber");
var secondInput = document.getElementById("secondNumber");

var num1 = parseInt(firstInput.value);
var num2 = parseInt(secondInput.value);

Now that you have two numbers, you can add them:

var sum = num1 + num2;

Finally, to put the sum back into the result element, you just have to find that element as usual:

var resultElement = document.getElementById("result");

and assign the sum to its innerHTML.

resultElement.innerHTML = sum;

Recalling that parseInt takes a string and returns a number, now you should realize that no parseInt needs to be involved here. You have a number already – it’s sum. No string is involved.

All together with comments for easy reading, with each line performing fewer steps:

// Get <input> elements
var firstInput = document.getElementById("firstNumber");
var secondInput = document.getElementById("secondNumber");

// Parse the text entered in each into numbers
var num1 = parseInt(firstInput.value);
var num2 = parseInt(secondInput.value);

// Find their sum
var sum = num1 + num2;

// Get the output element
var resultElement = document.getElementById("result");

// Display the sum in the output element
resultElement.innerHTML = sum;

The Total textbox that holds the "result" disappears every time I click on add button. Why?
@user39531: You’re selecting the <div> and setting its inner HTML to a new value. The textbox is part of its inner HTML. If you want to change the value displayed in the textbox instead, give it the id="result" and use resultElement.value = sum;.

Mario L · Accepted Answer · 2016-09-25 02:26:06Z

0

var num1 = parseInt(document.getElementById("firstNumber").value);
var num2 = parseInt(document.getElementById("secondNumber").value);

you have to define the variables and correct the parentheses

answered Sep 25, 2016 at 2:26

Mario L

2241 silver badge11 bronze badges

1 Comment

user39531 Over a year ago

My error was closing the parseInteger parenthesis before .value. Thank you

ColorWin · Accepted Answer · 2016-09-25 02:39:06Z

function add(){
"use strict";
        var num1 = parseInt(document.getElementById("firstNumber").value);
        //You need to define your variable before use.
        var num2 = parseInt(document.getElementById("secondNumber").value);
        console.log(document.getElementById("firstNumber"));
        //this is a DOM object
        console.log(typeof document.getElementById("firstNumber").value);
        //this is a "string"
        console.log(typeof parseInt(document.getElementById("firstNumber").value));
        console.log(typeof +document.getElementById("firstNumber").value);
        //quickly  by use '+'
        document.getElementById("result").innerHTML =num1+num2;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="MyStyle.css" rel="stylesheet" type="text/css">

<script src="myEvents.js"> </script>
</head>

<body>

<form>
1st Number : <input type="text" id="firstNumber" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>



<input type="button" onClick="add()" Value="add" />


</form>

<p>Total: 
<div id="result"> 
<input type="text"/> </div>

Collectives™ on Stack Overflow

Adding Numbers in JavaScript

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related