老师 帮我看下 这里一直提示未定义 是怎么回事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #eee;
}
#calculator{
position:fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="calculator">
<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="+" onclick="addHandler()" />
<input type="button" value="-" onclick="subtractHandler()"/>
<input type="button" value="x" onclick="multiplyHandler()"/>
<input type="button" value="÷" onclick="divideHandler()"/> -->
<input type="button" value="+" class="btn" title="add"/>
<input type="button" value="-" class="btn" title="sub"/>
<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"/>
<input type="button" value="1/x" class="btn" title="invert"/>
</p>
</div>
<script>
//第一次改进 将结构和行为分离
//第二次改进 使用循环
//第三次改进 提取函数
//第四次改进 管理代码（找到组织）
//第五次改进 OCP原则 开放与封闭原则
//第六次改进 模块化改进
//获取元素
var calculator =document.querySelector('#calculator')
// querySelector() 指获取指定元素中的第一个元素
// querySelectorAll()获取指定的全部元素
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));
};
});
console.log(outputResult);
function each(array,fn){
for(var i=0;i<array.length;i++){
fn(i,array[i])
}
}
//更新符号
function updateSign(symbol){
calculatorElem.sign.innerHTML=symbol
}
//运算
// 匿名函数自执行
var operate=(function(){
var operation={
add:function(num1,num2){
return num1+num2;
},
//减法
sub: 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(!operation[name]){
operation[name]=fn;
}
return operation;
}
};
//
function operate(name) {
if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法！');
return operation[name].apply(operation,[].slcie().call(arguments,1,argumen.length));
}
operate.addOperation=operation.addOperation;
// return function (name, num1, num2){
// if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法！');
// return operation[name](num1, num2);
// };
// return operate;
operate.addOperation('mod',function(num1,num2){
return num1%num2;
}).addOperation('power',function(base,power){
return Math.pow(base, power);
}).addOperation('invert',function(num){
return 1/num
}
)
// }
// )
//输出结果
function outputResult(result) {
calculatorElem.resultOutput.innerHTML =result;
}
})();
//匿名函数自我执行
</script>
</body>
</html>
问题描述：我看了下课件的源文件 也是提示outputResult未被定义 是老师课程上漏了这一步吗
正在回答 回答被采纳积分+1
同学你好，不是漏掉了，是each方法调用位置不对。
outputResult方法在自执行函数里面，而each方法在自执行函数外面，所以无法调用。将each挪到自执行里面就可以了
代码中还有其他问题：slice不需要调用，arguments少了字母
这边测试源代码没有报错，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星