Adding two number using JavaScript

Question

I am adding two number using JS function, when I put the values 1st time for example 3 + 4 my output come as "Your answer is 7" till here it's fine. However without refreshing when I put the different values 10 + 10 then my output become "Your answer is 7 10" it does not replace 7 instead it get added to that paragraph. what I need to change in code so I can get one value answer every time.

Many thanks in advance, Dhanajay

<p> Add two number  </p>

<label for="value1">Enter Number 1</label>
<input type="text" id="value1" />
<br />
<br />

<label for="value2">Enter Number 2</label>
<input type="text" id="value2" />
<br />
<br />
<button id="calculate" type="button" onclick="myFunction()">Calculate</button>
<p id="answer">Your answer is </p>



<script type="text/javascript">

    function myFunction() {
        var y = document.getElementById("value1").value;
        var z = document.getElementById("value2").value;
        var x = +y + +z;

        document.getElementById("answer").innerHTML = document.getElementById("answer").innerHTML + " " + x;
    }

</script>

Do you understand what the last line of myFunction() does? — Frédéric Hamidi
– Frédéric Hamidi, Commented Oct 16, 2015 at 10:21

Rakshith · Accepted Answer · 2015-10-16 10:29:56Z

2

<p> Add two number  </p>

<label for="value1">Enter Number 1</label>
<input type="text" id="value1" />
<br />
<br />

<label for="value2">Enter Number 2</label>
<input type="text" id="value2" />
<br />
<br />
<button id="calculate" type="button" onclick="myFunction()">Calculate</button>
<p id="answer">Your answer is </p>



<script type="text/javascript">

    function myFunction() {
        var y = document.getElementById("value1").value;
        var z = document.getElementById("value2").value;
        var x = (+y + +z);

        document.getElementById("answer").innerHTML =  x;
    }

</script>

answered Oct 16, 2015 at 10:29

Rakshith

3975 silver badges24 bronze badges

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

Comments

Rayon · Accepted Answer · 2015-10-16 10:27:24Z

1

Use another element to hold the answer like this:

function myFunction() {
  var y = document.getElementById("value1").value;
  var z = document.getElementById("value2").value;
  var x = +y + +z;

  document.getElementById("output").innerText = x;
}

<p>Add two number</p>

<label for="value1">Enter Number 1</label>
<input type="text" id="value1" />
<br/>
<br/>

<label for="value2">Enter Number 2</label>
<input type="text" id="value2" />
<br/>
<br/>
<button id="calculate" type="button" onclick="myFunction()">Calculate</button>
<p id="answer">Your answer is <span id="output"></span>
</p>

answered Oct 16, 2015 at 10:27

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Comments

brk · Accepted Answer · 2015-10-16 10:27:26Z

1

Hope this will be useful

function myFunction() {
     var y=null;
     var z=null;
         y = document.getElementById("value1").value;
         z = document.getElementById("value2").value;
        var x = parseInt(y) + parseInt(z);

        document.getElementById("ans").innerHTML = x;
    }

HTML

<p> Add two number  </p>

<label for="value1">Enter Number 1</label>
<input type="text" id="value1" />
<br />
<br />

<label for="value2">Enter Number 2</label>
<input type="text" id="value2" />
<br />
<br />
<button id="calculate" type="button" onclick="myFunction()">Calculate</button>
<p>Your answer is </p> <span id='ans'></span>

answered Oct 16, 2015 at 10:27

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Yuriy Yakym · Accepted Answer · 2015-10-16 10:21:27Z

0

change this:

document.getElementById("answer").innerHTML = document.getElementById("answer").innerHTML + " " + x;

to this:

document.getElementById("answer").innerHTML = x;

answered Oct 16, 2015 at 10:21

Yuriy Yakym

3,96621 silver badges33 bronze badges

1 Comment

dhananjay jha Over a year ago

Hi after changing it to document.getElementById("answer").innerHTML = x; my output is only showing the calculated number. What I exactly want that it also show the paragraph text "your answer is x" (where x is the calculated number). I figured it out that changing Your answer is  to Your answer is  and then putting your suggested code worked for me. Thanks :)

Jamiec · Accepted Answer · 2015-10-16 10:21:53Z

0

Your last line says this

 document.getElementById("answer").innerHTML = document.getElementById("answer").innerHTML + " " + x;

It is appending the result to the field.

Change it to simply be

 document.getElementById("answer").innerHTML = x;

answered Oct 16, 2015 at 10:21

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Comments

Thariama · Accepted Answer · 2015-10-16 10:24:26Z

0

You need to parse the value in answer to int and then add x to accumulate your answer plus the new number:

document.getElementById("answer").innerHTML = parseInt(document.getElementById("answer").innerHTML) + x;

answered Oct 16, 2015 at 10:24

Thariama

50.9k13 gold badges146 silver badges175 bronze badges

Comments

Hussy Borad · Accepted Answer · 2015-10-16 10:35:14Z

0

    var x=0;
function myFunction() {
        var y = document.getElementById("value1").value;
        var z = document.getElementById("value2").value;
         x += parseInt(y) + parseInt(z);
console.log(x);
        document.getElementById("answer").innerHTML = document.getElementById("answer").innerHTML + " " + x;
    }

enter link description here

edited Oct 16, 2015 at 10:35

answered Oct 16, 2015 at 10:26

Hussy Borad

5835 silver badges20 bronze badges

Comments

Sender · Accepted Answer · 2015-10-16 14:03:16Z

0

Replace this

document.getElementById("answer").innerHTML = document.getElementById("answer").innerHTML + " " + x;

with this

document.getElementById("answer").innerHTML = " Your answer is " + x;

edited Oct 16, 2015 at 14:03

Sender

6,90812 gold badges49 silver badges69 bronze badges

answered Oct 16, 2015 at 10:30

Angelo

8248 silver badges22 bronze badges

Comments

lemoney · Accepted Answer · 2015-10-16 10:24:49Z

-1

You need to purge the variables after calculation. Or else you're only appending the current definition

...
var x = +y + +z;    
delete y;
delete z;

answered Oct 16, 2015 at 10:24

lemoney

1611 silver badge10 bronze badges

Collectives™ on Stack Overflow

Adding two number using JavaScript

9 Answers 9

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related