老师，这段简易计算器的代码运行报错是什么原因？
来源：3-1 添加JS功能
weixin_慕前端6235132
2020-02-20 17:38:13
<!DOCTYPE html>
<html>
<head>
<title>简易计算器</title>
<style type="text/css">
body {background-color:#eee;}
#calculator {margin: 100px 0 0 150px;}
</style>
</head>
<meta charset="utf-8">
<body>
<!-- 搭建结构 -->
<div id="calculator">
<p>
<input type="text" class=formerInput value="1">
<span class="sign">+</span>
<input type="text" class=latorInput 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="×" onclick="multiplyHandler();"/>
<input type="button" value="÷" onclick="divideHandler();"/>
</p >
</div>
<!-- 获取 DOM元素 -->
<script type="text/javascript">
var calculator=document.querySelector('#calculator');
var formerInput=calculator.querySelector('.formerInput');
var latorInput=calculator.querySelector('.latorInput');
var sign=calculator.querySelector('.sign');
var resultOutput=calculator.querySelector('.resultOutput');
//创建事件（执行函数）
function addHandler(){
sign.innerHTML="+";
resultOutput.innerHTML=+formerInput.value++latorInput.value;
}
function subtractHandler(){
sign.innerHTML="-";
resultOutput.innerHTML=formerInput.value-latorInput.value;
}
function multiplyHandler(){
sign.innerHTML="×";
resultOutput.innerHTML=formerInput.value*latorInput.value;
}
function divideHandler(){
sign.innerHTML="÷";
resultOutput.innerHTML=formerInput.value/latorInput.value;
}
</script>
</body>
</html>
1回答
-
同学你好，语法的问题。加法运算中两个+需要空格隔开，一个代表运算的+，一个将字符串转化为数值：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题