老师，可以帮我看一下吗
来源：3-1 添加JS功能
zhangwenxin
2020-04-01 17:46:26
控制台一直报错，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
body{
background: #eee;
}
#calculator{
position: absolute;
right: 50%;
bottom: 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"/>
<sapn>=</sapn>
<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>
<script>
// 获取DOM元素
var calculator = document.getElementById('#calculator');
var formerInput = calculator.querySelector('.formerInput');
var laterInput = calculator.querySelector('.laterInput');
var sign = calculator.querySelector('.sign');
var resultOutput = calculator.querySelector('.resultOutput');
// 加法
function addHandler(){
sign.innerHTML = '+';
resultOutput.innerHTML = +formerInput.value + +laterInput.value;
}
// 减法
function subtractHandler(){
sign.innerHTML = '-';
resultOutput.innerHTML = formerInput.value - laterInput.value;
}
// 乘法
function multiplyHandler(){
sign.innerHTML = '×';
resultOutput.innerHTML = formerInput.value * laterInput.value;
}
// 除法
function divideHandler(){
sign.innerHTML = '÷';
resultOutput.innerHTML = formerInput.value / laterInput.value;
}
</script>
</body>
</html>
1回答
-
同学你好，是因为获取元素的问题，如下：
通过getElementById获取不需要添加 “#”。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题