<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单计算器</title>
<style type="text/css">
#caculate{
margin: 150px auto;
width: 500px;
}
</style>
</head>
<body>
<div id="caculator">
<p>
<input type="text" class="formerInput" value="1">
<span class="sign">+</span>
<input type="text" class="laterInput" value="1">
<span>=</span>
<span class="resultOutput">2</span>
</p>
<p>
<input type="button" value="+" class="btn" title="add">
<input type="button" value="-" class="btn" title="subtract">
<input type="button" value="*" class="btn" title="multiply">
<input type="button" value="/" class="btn" title="divide">
</p>
</div>
<script type="text/javascript">
//获取元素
var caculator=document.querySelector("#caculator");
var formerInput=caculator.querySelector(".formerInput");
var laterInput=caculator.querySelector(".laterInput");
var sign=caculator.querySelector(".sign");
var resultOutput=caculator.querySelector(".resultOutput");
//1.结构分离
//获取所有的button按钮,最好不要用标签名
var btns=caculator.querySelectorAll(".btn");
/*
注意:千万不要这样写,这样子的话,没有等点击的时候,就会执行函数了
btns[0].οnclick=addHandler();
btns[1].οnclick=subtractHandler();
btns[2].οnclick=multiplyHandler();
btns[3].οnclick=divideHandler();
*/
/*btns[0].οnclick=addHandler;
btns[1].οnclick=subtractHandler;
btns[2].οnclick=multiplyHandler;
btns[3].οnclick=divideHandler;*/
//遍历循环
for(var i=0;i<btns.length;i++){
//判断是什么号就做什么运算
switch(this.title){
case "add":
addHandler();
break;
case "subtract":
subtractHandler();
break;
case "multiply":
multiplyHandler();
break;
case "divide":
divideHandler();
break;
}
}
function addHandler(){
sign.innerHTML='+';
//因为加好可以拼接字符串,并且通过选择起获取的值都是字符串,所以需要通过在该字符串之前添加一个加号
resultOutput.innerHTML= +formerInput.value+ +laterInput.value;
alert(resultOutput);
}
function subtractHandler(){
sign.innerHTML='-';
resultOutput.innerHTML=formerInput.value-laterInput.value;
}
function multiplyHandler(){
sign.innerHTML='*';
resultOutput.innerHTML=formerInput.value*laterInput.value;
}
function divideHandler(){
sign.innerHTML='/';
resultOutput.innerHTML=formerInput.value/laterInput.value;
}
</script>
</body>
</html>