user39531 user39531 - 2 months ago 18
Javascript Question

Adding Numbers in JavaScript

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



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>




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