In: Computer Science
Provide two text boxes for the user to enter in 2 values. Once
the user clicks off the second box, the
sum of the two numbers displayed as a header level 2.
here is what i have , and i cant find a way to display the sum of
the numbers in each box in the header along with the other
text.
<h1>Problem 6</h1>
<input type="text" id="txt1" onkeyup="sum();" />
<input type="text" id="txt2" onkeyup="sum();" />
<h2 id="txt3" result=""> The sum of the two numbers
is=""</h2>
<script>
function sum() {
var txtFirstNumberValue =
document.getElementById('txt1').value;
var txtSecondNumberValue =
document.getElementById('txt2').value;
var result = parseInt(txtFirstNumberValue) +
parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('txt3').value = result;
}
}
</script>
HTML file :
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Problem 6</h1>
<input type="text" id="txt1" />
<input type="text" id="txt2" onblur="sum()" />
<h2 id="txt3" result=""> The sum of the two numbers is =</h2>
<script>
//function sum()
function sum() {
//getting first number entered by user
var txtFirstNumberValue = document.getElementById('txt1').value;
//getting second number entered by user
var txtSecondNumberValue = document.getElementById('txt2').value;
//add numbers
var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
//display result
document.getElementById('txt3').innerHTML = "The sum of the two numbers is ="+result;
}
}
</script>
</body>
</html>
==============================================
Screen showing textboxes :
Screen showing result :