老师,这个方法怎么不变颜色,而且写完第一个加法功能不管用

来源:3-1 添加JS功能

前端小白同学

2020-06-10 00:37:22

http://img.mukewang.com/climg/5edfbabd09cebaa007110381.jpg

http://img.mukewang.com/climg/5edfbabd097c193f10410778.jpg


写回答

2回答

好帮手慕粉

2020-06-10

同学你好,当按f12打开控制台时,报如下错误:

http://img.mukewang.com/climg/5ee03aed09bab66f17900170.jpg

意思是calculator.queryselector不是一个函数。查看代码:

http://img.mukewang.com/climg/5ee03b6c09c9483c08410282.jpg

如果我的回答帮助了你,欢迎采纳。祝学习愉快~

0

前端小白同学

提问者

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>

0

0 学习 · 14456 问题

查看课程