Ashley P.

asked • 11/21/19

Simple Adder HTML JavaScript

Create the form structure shown in Figure 2, below. Write a JavaScript function according to the following requirements.

 A user should be allowed to enter two numbers in text boxes.

 When a user click on “+” button;

o Check whether inputs in the text boxes are numbers (use isNAN). If not, meaningful message should be displayed considering wrong inputs.

o If the inputs are numbers, summation of two numbers should be displayed on 3rd box (total)



I wrote the following code but the total appears and does not remain in the text box and disappears



<script type="text/javascript">

function myfunction() {

var first = document.getElementById("textbox1").value;

var second = document.getElementById("textbox2").value;

alert( first );

if(isNaN(first) && isNaN(second))

{

alert( "Not a number" );

return false;

}

else

{

var answer =parseFloat(first)+parseFloat(second);

var textbox3 = document.getElementById('textbox3');

textbox3.value=answer;

}

}

</script>

<body>

1<sup>st</sup> Number <input type="text" name="textbox1" id="textbox1" />

</br><br>

2<sup>nd</sup> Number <input type="text" name="textbox2" id="textbox2" />

</br> <br>

<input type="submit" name="button" id="button1" onclick="myfunction()" value="+" />

<br/><br>

Total:

<input type="text" name="textbox3" id="textbox3" readonly="true"/>

</body>

</html>

1 Expert Answer

By:

Patrick B. answered • 11/24/19

Tutor
4.7 (31)

Math and computer tutor/teacher

See tutors like this
See tutors like this

This script adds the numbers input into the text boxes and

displays the sum in an alert message box.


NEVER display output in a text box as it can be CHANGED.

Use either a label or an alert message box


I see you are using double quotes instead of single quotes.

I also see you are using the same names for the NAME and ID specs for the

input boxes


For the most part, this script does what you want it do..

====================================================


<html>


<body>


<script>

function Calculate()

{

//alert('calculate');

var num1 = document.getElementById('num1').value;

var num2 = document.getElementById('num2').value;

var sum = Number(num1) + Number(num2);

alert(' the sum is '+ sum);


}

</script>



Input First # <input type="text" id="num1" /> </br>

Input 2nd # <input type="text" id="num2"/> </br>



<button type="button" name="cmdButCALCULATE" onclick="Calculate();"> CALCULATE </button>






</body>





</html>

Upvote • 0 Downvote
More
Report

Still looking for help? Get the right answer, fast.

Ask a question for free

Get a free answer to a quick problem.
Most questions answered within 4 hours.

OR

Find an Online Tutor Now

Choose an expert and meet online. No packages or subscriptions, pay only for the time you need.