为什么这个 javascript 计算器不工作？

Question

I've tried to make this simple calculator in javascript.我试图在 javascript 中制作这个简单的计算器。 I've checked the names of the classes and all, but I can't find any problem.我已经检查了类的名称和所有的名称，但我找不到任何问题。 Besides the console does not show any problem either, but still nothing happens when I click on the buttons.除了控制台也没有显示任何问题，但是当我单击按钮时仍然没有任何反应。 This is the html file:这是 html 文件：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport">
    <link rel="stylesheet" href="style.css">
    <title>Calculator</title>
  </head>
  <body>
<section class="calculator">
  <form>
    <div class="previous_op"></div>
    <div class="current_op"></div>
</form>
<button  class ='clearBtn span-two'>AC</button>
<button class ='delBtn'>DEL</button>
<button class='btn btn-orange' data-num='/'>/</button>
<button class='btn btn-grey' data-num='1'>1</button>
<button class='btn btn-grey' data-num='2'>2</button>
<button class='btn btn-grey' data-num='3'>3</button>
<button class='btn btn-orange' data-num='*'>*</button>
<button class='btn btn-grey' data-num='4'>4</button>
<button class='btn btn-grey' data-num='5'>5</button>
<button class='btn btn-grey' data-num='6'>6</button>
<button class='btn btn-orange' data-num='+'>+</button>
<button class='btn btn-grey' data-num='7'>7</button>
<button class='btn btn-grey' data-num='8'>8</button>
<button class='btn btn-grey' data-num='9'>9</button>
<button class='btn btn-orange' data-num='-'>-</button>
<button class='btn btn-grey' data-num='.'>.</button>
<button class='btn btn-grey' data-num='0'>0</button>
<button class ='span-two equalBtn'>=</button>
</section>
  </body>
  <script src="javascript.js"></script>
</html>

And this is the javascript file:这是 javascript 文件：

const btns = document.querySelector('.btn');
const prevOp = document.querySelector('.previous_op');
const currOp = document.querySelector('.current_op');
const equalBtn = document.querySelector('.equalBtn');
const clearBtn = document.querySelector('.clearBtn');
const deleteBtn = document.querySelector('.delBtn');


for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    let number= btns[i].getAttribute('data-num');
    currOp.value += number;
  })
}

equalBtn.addEventListener('click', function() {
  let value = eval(currOp.value);
  currOp.value = value;
})
clearBtn.addEventListener('click', function() {
  currOp.value = '';
})

Answer 1

U have three missing你失踪了三个

1) make querySelector to querySelectorAll for Nodelist 1) 使 querySelector 成为 Nodelist 的 querySelectorAll

2) write this inspide of btns[i] 2) 在 btns[i] 之外写这个

3) initialize your currOp.value 3）初始化你的 currOp.value

 const btns = document.querySelectorAll('.btn'); const prevOp = document.querySelector('.previous_op'); const currOp = document.querySelector('.current_op'); const equalBtn = document.querySelector('.equalBtn'); const clearBtn = document.querySelector('.clearBtn'); const deleteBtn = document.querySelector('.delBtn'); currOp.value=""; for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function() { let number= this.getAttribute('data-num'); currOp.value += number; currOp.innerHTML=currOp.value; console.log( currOp.value) }) } equalBtn.addEventListener('click', function() { let value = eval(currOp.value); currOp.value = value; currOp.innerHTML=currOp.value; }) clearBtn.addEventListener('click', function() { currOp.value = ''; currOp.innerHTML=''; })

 <.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport"> <title>Calculator</title> </head> <body> <section class="calculator"> <form> <div class="previous_op"></div> <div class="current_op"></div> </form> <button class ='clearBtn span-two'>AC</button> <button class ='delBtn'>DEL</button> <button class='btn btn-orange' data-num='/'>/</button> <button class='btn btn-grey' data-num='1'>1</button> <button class='btn btn-grey' data-num='2'>2</button> <button class='btn btn-grey' data-num='3'>3</button> <button class='btn btn-orange' data-num='*'>*</button> <button class='btn btn-grey' data-num='4'>4</button> <button class='btn btn-grey' data-num='5'>5</button> <button class='btn btn-grey' data-num='6'>6</button> <button class='btn btn-orange' data-num='+'>+</button> <button class='btn btn-grey' data-num='7'>7</button> <button class='btn btn-grey' data-num='8'>8</button> <button class='btn btn-grey' data-num='9'>9</button> <button class='btn btn-orange' data-num='-'>-</button> <button class='btn btn-grey' data-num='.'>.</button> <button class='btn btn-grey' data-num='0'>0</button> <button class ='span-two equalBtn'>=</button> </section> </body> </html>

为什么这个 javascript 计算器不工作？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-04-29 15:23:54

为什么这个 javascript 计算器不工作？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-04-29 15:23:54

解决方案1
0 已采纳 2020-04-29 15:23:54