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>
Your code seems to be missing a part that prevents the form from refreshing after clicking the "+ button". To achieve this, you can change the button type to "button" instead of "submit" and add `event.preventDefault();` in your JavaScript function. Here's the updated code:
```html
<html>
<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="button" name="button" id="button1" onclick="myfunction()" value="+" /><br/><br/>
Total:
<input type="text" name="textbox3" id="textbox3" readonly="true" />
<script type="text/javascript">
function myfunction() {
var first = document.getElementById("textbox1").value;
var second = document.getElementById("textbox2").value;
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;
}
event.preventDefault();
}
</script>
</body>
</html>
```
With this code, the form will no longer refresh after clicking the "+" button, and the total will remain in the textbox.