HTML Code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/calcmodel.js"></script>
<script src="js/calccontroller.js"></script>
</head>
<body>
<input type="text" id="firstNo" placeholder="Type First Number"/>
<input type="text" id="secondNo" placeholder="Type Second Number"/>
<button id="addBt" data-operation="+">Add</button>
<button id="subtractBt" data-operation="-">Subtract</button>
<button id="mulBt" data-operation="*">Multiply</button>
<button id="divBt" data-operation="/">Divide</button>
<h1>Result is <span id="result"></span></h1>
</body>
</html>In Js Folder calcmodel.js
var calcObject = {
add:function (x,y){
return parseInt(x) + parseInt(y);
},
subtract :function (x,y){
return x-y;
}
}
In Js Folder calccontroller.js
window.addEventListener("load",init);
function init(){
/*document.getElementById("addBt").addEventListener("click",doOperation);
document.getElementById("subtractBt").addEventListener("click",doOperation);*/
var buttonArray = document.getElementsByTagName("button");
for(var i = 0 ; i<buttonArray.length; i++){
buttonArray[i].addEventListener("click",doOperation);
}
}
function doOperation(event){
var result =0;
var firstNo = document.getElementById("firstNo").value;
var secondNo = document.getElementById("secondNo").value;
//var operation = this.getAttribute("data-operation");
var operation = event.srcElement.getAttribute("data-operation");
//result = calcObject[this.getAttribute("data-operation")](firstNo,secondNo);
var expression = firstNo + operation + secondNo;
result = eval(expression);
console.log("Expression is ",expression);
/*if(this.innerHTML==="Add"){
result = calcObject.add(firstNo,secondNo);
}
else
if(this.innerHTML==="Subtract"){
result = calcObject.subtract(firstNo,secondNo);
}*/
document.getElementById("result").innerHTML=result;
}
/*function addLogic(){
var firstNo = document.getElementById("firstNo").value;
var secondNo = document.getElementById("secondNo").value;
var result = add(firstNo,secondNo);
document.getElementById("result").innerHTML=result;
}
function subtractLogic(){
var firstNo = document.getElementById("firstNo").value;
var secondNo = document.getElementById("secondNo").value;
var result = subtract(firstNo,secondNo);
document.getElementById("result").innerHTML=result;
}*/
Related posts:
Sanjay Jain
I am a graphic and web designer in Delhi and Professional Web and Graphics Designer & Animator. I provide SEO Service in Delhi along with SEO, Web and Graphics Designing Courses training with latest technique.