Jump to content

JavaScript Addition Operation Problem


Recommended Posts

Hello Gurus,


I'm a beginner to the Java Script.


While learning Arithmetic chapter, I just tried the below simple program. Everything is giving correct result except the addition operation.


I tried my best to understand and produce the result.


Could anyone point out/throw some light on what I'm doing wrong please.



<!DOCTYPE html>

<h1>Assigning Values</h1>

<p>In JavaScript the = operator is used to assign values to variables.</p>
<input type="number" id="a" value=5></input>
<input type="number" id="b" value=1></input>
<p id="+"></p>
<p id="-"></p>
<p id="YY"></p>
<p id="*"></p>
<p id="/"></p>

var x = document.getElementById( "a" ).value;
var y = document.getElementById( 'b' ).value;


//document.getElementById("+").innerHTML = "Additon - " + (x + y) + typeof x;
//document.getElementById("+").innerHTML = (x + y) + " - Additon" ;
//document.getElementById("+").innerHTML = x + y;
document.getElementById("+").innerHTML = Number(x) + y;


document.getElementById("-").innerHTML = x - y ;
document.getElementById("YY").innerHTML = "Subtraction - " + x - y ;
document.getElementById("*").innerHTML = "Multiplication - " + x * y;
document.getElementById("/").innerHTML = "Divide - " + x / y;




Thanks in Advance.




Link to comment
Share on other sites

You didn't actually explain what wasn't working, so my first guess is because you're trying to add strings. Try "casting" them to integers instead.



var x = parseInt(document.getElementById( "a" ).value, 10);
var y = parseInt(document.getElementById( 'b' ).value, 10);
Link to comment
Share on other sites

Javascript often tries to make implicit type conversions when it believes that is what is desired, so if you are not careful you can often see unexpected results. For example if you mix strings and numbers it might guess wrong.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">


<h1>Assigning Values</h1>


<input type="number" id="ida" value="5" />
<input type="number" id="idb" value="1" />
<input type="button" id="btn1" value="Calculate"/>

<div id="out1"></div>


document.getElementById('btn1').onclick = handler;

function handler(){

var a = document.getElementById('ida').value;
var b = document.getElementById('idb').value;
var x = Number(a);
var y = Number(B);
var sum = x + y;

var str = "typeof: " + (typeof a) + " " + (typeof B);

str += "<br/>Adding raw: " + a + b;
str += "<br/>Adding raw: " + (a + B);
str += "<br/>Adding numbers: " + x + y;
str += "<br/>Adding numbers: " + (x + y);
str += "<br/>Adding numbers: " + sum;

document.getElementById("out1").innerHTML = str;

}//end of function


Link to comment
Share on other sites

Javascript uses the same token for addition as for concatenation. If any of the two arguments being added is a string the operation will be concatenation rather than addition. Values taken from form inputs are always strings, so additions between them will result in concatenation.


A string value can be converted to a number using the Number() function.

Link to comment
Share on other sites

Thank you for your inputs Scientist,Dave and Ingolme.


I was thinking I have declared input type as number so obviously the variable also should be variable. With Ingolme statement i came to know everything coming from the form will always be the string.





Edited by Md.Riyaz
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...