请老师帮我检查，谢谢
来源：4-4 第三次修改--提取函数
冯靖博
2020-09-29 17:53:44
第三版
<!DOCTYPE html>
<html>
<head>
<title>简易计算器</title>
<style type="text/css">
body{
background-color:#eee;
}
.calculator{
text-align:center;
margin:0 auto;
}
button{
margin:10px 10px;
width:20px;
height:20px;
}
</style>
</head>
<body>
<div class="calculator">
<p>
<input type="text" class="frontinput" value="1">
<span class="signal">+</span>
<input type="text" class="backinput" value="1">
<span>=</span>
<span class='result'>2</span>
</p>
<p>
<input type="button" class="btn" value="+" title="add">
<input type="button" class="btn" value="-" title="subtract">
<input type="button" class="btn" value="*" title="multiply">
<input type="button" class="btn" value="/" title="divide">
</p>
</div>
<script type="text/javascript">
//获取元素
var btn=document.querySelectorAll(".btn");
var signal=document.querySelector(".signal");
var frontinput=document.querySelector(".frontinput");
var backinput=document.querySelector(".backinput");
var result=document.querySelector(".result");
//Byclassname 与 queryselector的区别
//document.queryselector.value??
//绑定事件
each(btn,function(index,elem){
elem.onlick= function(){
console.log(this.value);
switch (this.title){
case 'add':
add();
break;
case 'subtract':
subtract();
break;
case 'multiply':
multiply();
break;
case 'divide':
divide();
break;
});
//遍历函数
function each(array,fn){
for(i=0;i<array.length;i++){
fn(i,array[i]);
}
}
//注意add()与add的区别
//写函数
//更新符号
function upgrade(symbol){
signal.innerHTML=symbol;
}
//计算显示结果
function add1(num1,num2){
return num1+num2;
}
function subtract1(num1,num2){
return num1-num2;
}
function multiply1(num1,num2){
return num1*num2;
}
function divide1(num1,num2){
return num1/num2;
}
//输出结果
function resultOutput(result){
result.innerHTML=result;
}
function add(){
upgrade("+");
resultOutput(add1(frontinput.value,backinput.value));
}
function subtract(){
upgrade("-");
resultOutput(subtract1(frontinput.value,backinput.value));
}
function multiply(){
upgrade("*");
resultOutput(multiply1(frontinput.value,backinput.value));
}
function divide(){
upgrade("/");
resultOutput(divide1(frontinput.value,backinput.value));
}
//result改内容用.innerHTML
</script>
</body>
</html>
1回答
-
好帮手慕言
2020-09-29
同学你好，代码中存在以下问题：
1、代码中少写了括号
２、onclick单词少写了一个c，修改如下：
3、参数和变量名相同，不能实现效果，建议：修改参数名，代码参考：
4、加法运算不对。输入框中的值是字符串类型，直接相加会进行字符串拼接，建议使用下方写法
关于同学代码中注释的问题，在同学的另一个提问中回复了，快去查看吧，链接：http://class.imooc.com/course/qadetail/257530
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题