<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
</head>
<body>
Enter the value :
<input id="id1" type="number"><br><br>
Enter the value :
<input id="id2" type="number"><br><br>
<button onclick=fun('add')>Addition</button>
<button onclick=fun('sub')>Substraction</button>
<button onclick=fun('div')>Division</button>
<button onclick=fun('mul')>Multiplication</button><br><br>
Your Answer Is :<span id="an"></span>
<script>
function fun(cc){
var x1=document.getElementById("id1").value;
var x2=document.getElementById("id2").value;
if(x1.length==0 && x2.length==0){
alert("enter the value");
}
else{
if(cc=='add'){
var ans=Number(x1)+Number(x2);
}
else if(cc=='sub'){
var ans=Number(x1)-Number(x2);
}
else if(cc=='div'){
var ans=Number(x1)/Number(x2);
}
else if(cc=='mul'){
var ans=Number(x1)*Number(x2);
}
document.getElementById("an").innerHTML=ans;
}
}
</script>
</body>
</html>
