老师,这个方法怎么不变颜色,而且写完第一个加法功能不管用
来源:3-1 添加JS功能
前端小白同学
2020-06-10 00:37:22
2回答
好帮手慕粉
2020-06-10
同学你好,当按f12打开控制台时,报如下错误:
意思是calculator.queryselector不是一个函数。查看代码:
如果我的回答帮助了你,欢迎采纳。祝学习愉快~
前端小白同学
提问者
2020-06-10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
body{
background-color: darkgrey;
}
#calculator{
margin: 300px 0 0 500px;
}
</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="*" onclick="multiplyHandler();"/>
<input type="button" value="/" onclick="divideHandler();"/>
</p>
</div>
<script>
//获取元素
var calculator=document.querySelector("#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;
}
</script>
</body>
</html>
相似问题