Adding Numbers in JavaScript

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>

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>

Share Improve this question edited Sep 25, 2016 at 15:51 asked Sep 25, 2016 at 2:14 user39531 511 silver badge8 bronze badges

1 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 Commented Sep 25, 2016 at 2:22

Add a ment |

4 Answers 4

Sorted by: Reset to default 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;

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 ments 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;

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

you have to define the variables and correct the parentheses

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Adding Numbers in JavaScript - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)