javascript simple addition computation

Question

im new to javascript. i dont know what's wrong with my code

num1:<input id="num1" type="number">
num2:<input id="num2" type="number">

<button type="button" onclick="myFunction()">compute</button>

answer:<input id="demo" type="text"> and answer: <p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("num1").value;
    var y = document.getElementById("num2").value;
    var ans = x + y;
    document.getElementById("demo").innerHTML = ans;
}
</script>

Possible duplicate of http://stackoverflow.com/questions/32562260/javascript-simple-addition-program-not-working/32562296#32562296 — Tushar, Sep 19 '15 at 14:40

score 0 · Answer 1 · answered Sep 19 '15 at 14:50

0

Here is your answer ...

    <button type="button" onclick="myFunction()">compute</button>

answer:<input id="demo" type="text"> and answer: <p id="demo"></p>

<script> function myFunction() {
    var x = document.getElementById("num1").value;
    var y = document.getElementById("num2").value;  
    var ans = parseInt(x) + parseInt(y);
    document.getElementById("demo").innerHTML = ans; }
</script>

answered Sep 19 '15 at 14:50

Sohail Shaikh

215
1
4
10

the reason is given by @pavelDurov – Sohail Shaikh Sep 20 '15 at 06:54
My question was rhetorical. For an answer to be complete, it needs to not only give code, but explain **why** and **how** the code solves the problem. Referring to another answer to the explanation doesn't really qualify. – Sep 20 '15 at 06:56

score 0 · Answer 2 · answered Sep 19 '15 at 15:10

0

You have the id="demo" twice. In case of input there is no innerHtml, it is value instead but thats not what you want. So use this:

    document.querySelector("p#demo").innerHTML = ans;

answered Sep 19 '15 at 15:10

mad

1
2

Sim · Accepted Answer · 2015-09-20T03:41:40.830

Don't use an ID twice in an document and the values you get from the input fields are strings and you do an string addition, so you have to parse it to integer before. The HTML5 input type number onlys displays in some new browsers a field which is invalid for other characters than numbers, but you get a string when you read the value of it with javascript. You can parse your strings with parseInt. If you want to support float, you can use parseFloat.

num1:<input id="num1" type="number">
num2:<input id="num2" type="number">

<button type="button" onclick="myFunction()">compute</button>

answer:<input id="demoInput" type="text"> and answer: <p id="demoHtml"></p>

<script>
function myFunction() {
    var x = document.getElementById("num1").value;
    var y = document.getElementById("num2").value;
    var ans = parseInt(x) + parseInt(y)
    document.getElementById("demoInput").value = ans;
    document.getElementById("demoHtml").innerHTML = ans;
}
</script>

By the way: If you want to name two or more elements with the same ID, use the class attribute. And you get with document.getElementsByClassName("demo") an array of your elements.

This does not answer the basic problem. – Sep 19 '15 at 16:07 — , Sep 19 '15 at 16:07

score 0 · Answer 4 · answered Sep 19 '15 at 15:32

When you get value from an input control you will get it as String type , even thought you set it as number type in html - this type is for text input restrictions only (you can enter only numbers to that textbox).

var ans = x + y;

Here you've simply "chained" the x and y strings to a new variable - that's what '+' operator does when used on strings.

You can notice strings by " symbol which surrounds them while numbers aren't...

Parsing (deserialization) of string objects to numbers can be done with parseFloat (converts to float type) and parseInt (converts to int type).

Also, you can check types ether by instanceof or with constructor:

if(ans.constructor === String){

}

javascript simple addition computation

4 Answers4