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>
1st Number <input type="text" name="textbox1" id="textbox1" />
</br><br>
2nd 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>