老师,帮我看看哪里出问题了
来源:4-6 第五次修改--开放与封闭原则
陈孝芳
2020-02-26 22:08:57
<!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">
<input type="button" value="^" class="btn" title="power">
</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);
outputResult(operate(this.title,calculatorElem.formerInput.value,calculatorElem.laterInput.value));
};
});
//遍历
function each(array,fn){
for(var i=0;i<array.length;i++){
fn(i,array[i]);
}
}
//更新符合
function updateSign(symbol){
calculatorElem.sign.innerHTML=symbol;
}
//运算
function operate(name,num1,num2){
if(!operation[name])throw new Error("不存在名为"+name+"运算方法!");
return operation[name](num1,num2);
}
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;
},
addOperation:function(name,fn){
if(!this[name]){
this[name]=fn;
}
return this;
}
};
operation.addOperation("mod",function(num1,num2){
return num1%num2;
}).addOperation("power",function(num1,num2){
return Math.power(base,power);
});
//输出结果
function outputResult(result){
calculatorElem.resultOutput.innerHTML=result;
}
</script>
</body>
</html>
1回答
好帮手慕粉
2020-02-27
同学你好,是同学在调用函数时传参传错了,并且求幂的函数时pow():
如果我的回答 帮助了你,欢迎采纳,祝学习愉快~
相似问题