<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<style>
p{display:inline;}
input[type=button]{display: none;}
#chck{display: inline;}
</style>
</head>
<body>
<label for="num1">Enter First Number</label>
<input type="text" id="num1"><p id="one"></p><br>
<label for="num2">Enter Second Number</label>
<input type="text" id="num2"><p id="two"></p>
<br><br>
<input type="button" id="chck" value="Validate the Numbers">
<input type="button" id="add" class="math" value="Add Both Numbers = "><p id="addAns"></p><br>
<input type="button" id="sub" class="math" value="Subtract Smaller from Larger = "><p id="subAns"></p><br>
<input type="button" id="mult" class="math" value="Multiply Both Numbers = "><p id="multAns"></p><br>
<input type="button" id="div" class="math" value="Divide First by Second = "><p id="divAns"></p>
<script>
var A = '';
var B = '';
document.getElementById("chck").addEventListener("click", function() {
document.getElementById("one").innerHTML="";
document.getElementById("two").innerHTML="";
A = document.getElementById('num1').value;
if(isNaN(A)) document.getElementById("one").innerHTML=" Only enter numbers";
B = document.getElementById('num2').value;
if(isNaN(B)) document.getElementById("two").innerHTML=" Only enter numbers";
if(!(isNaN(A)) && !(isNaN(B))){
document.getElementById("chck").style.display = 'none';
for(i=0; i<4; i++){
document.getElementsByClassName("math")[i].style.display = 'inline';
}
}
});
document.getElementById("add").addEventListener("click", function() {
document.getElementById("addAns").innerHTML = " " + (Number(A) + Number(B));
});
document.getElementById("sub").addEventListener("click", function() {
if( Number(A) > Number(B)){
document.getElementById("subAns").innerHTML = " " + (Number(A) - Number(B));
}else{
document.getElementById("subAns").innerHTML = " " + (Number(B) - Number(A));
}});
document.getElementById("mult").addEventListener("click", function() {
document.getElementById("multAns").innerHTML = " " + (Number(A) * Number(B));
});
document.getElementById("div").addEventListener("click", function() {
document.getElementById("divAns").innerHTML = " " + (Number(A) / Number(B));
});
document.getElementById("num1").addEventListener("focusout", Myfunction);
document.getElementById("num2").addEventListener("focusout", Myfunction);
function Myfunction(){
document.getElementById("chck").style.display = 'inline';
for(i=0; i<4; i++){
document.getElementsByClassName("math")[i].style.display = 'none';
document.getElementsByTagName("p")[i+2].innerHTML = '';
}
}
</script>
</body>
</html>
