老师，帮我看看哪里出问题了
来源：4-6 第五次修改--开放与封闭原则
陈孝芳
2020-02-26 20:12:03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第五次修改--开放与封闭原则</title>
</head>
<style>
body{
background-color:#eee;
}
#calculator{
margin:20% 30%;
}
</style>
<body>
<div id="calculator">
<p>
<input class="formerInput" value="1"></input>
<span class="sign">+</span>
<input class="laterInput" value="1"></input>
<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="x" class="btn" title="multiply">
<input type="button" value="÷" class="btn" title="divide">
<input type="button" value="%" class="btn" title="mod">
</p>
</div>
<script type="text/javascript">
//第五次改进--开放与封闭原则
//获取元素
var wrapElem=document.querySelector("#calculator");
var calculatorElem={
formerInput:wrapElem.querySelector(".formerInput"),
laterInput:wrapElem.querySelector(".laterInput"),
sign:wrapElem.querySelector(".sign"),
resultOutput:wrapElem.querySelector(".resultOutput"),
btns:wrapElem.querySelectorAll(".btn")
};
//绑定事件
each(calculatorElem.btns,function(index,elem){
elem.onclick=function(){
updateSign(this.value)
switch (this.title) {
case "add":
//addHandler();
outputResult(operation.add(calculatorElem.formerInput.value,calculatorElem.laterInput.value));
break;
case "subtract":
//subtractHandler();
outputResult(operation.subtract(calculatorElem.formerInput.value,calculatorElem.laterInput.value));
break;
case "multiply":
//multiplyHandler();
outputResult(operation.multiply(calculatorElem.formerInput.value,calculatorElem.laterInput.value));
break;
case "divide":
//divideHandler();
outputResult(operation.divide(calculatorElem.formerInput.value,calculatorElem.laterInput.value));
break;
case "mod":
outputResult(operation.mod(calculatorElem.formerInput.value,calculatorElem.laterInput.value));
break;
}
};
});
//遍历
function each(array,fn){
for(var i=0;i<array.length;i++){
fn(i,array[i]);
}
}
//更新符合
function updateSign(symbol){
calculatorElem.sign.innerHTML=symbol;
}
var operation={
//加法
add:function(num1,num2){
return +num1 + +num2;
},
//减法
subtract:function(num1,num2){
return num1-num2;
},
//乘法
multiply:function(num1,num2){
return num1*num2;
},
//除法
divide:function(num1,num2){
return num1/num2;
},
//mod
mod:function(num1,num2){
return num1%mum2;
}
};
//输出结果
function outputResult(result){
calculatorElem.resultOutput.innerHTML=result;
}
</script>
</body>
</html>
2回答
-
好帮手慕慕子
2020-02-27
同学你好， 确实是如下单词拼写错误，修改后就好了。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
陈孝芳
提问者
2020-02-26
老师，我知道了，是我字母写错了
0
相似问题