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

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

javascript

为什么这个javascript计算器不工作？,javascript,calculator,Javascript,Calculator,我试着用javascript制作这个简单的计算器。我已经检查了所有类的名称，但没有发现任何问题。除此之外，控制台也没有显示任何问题，但当我点击按钮时，仍然没有发生任何事情。这是html文件： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport"> <link rel=

我试着用javascript制作这个简单的计算器。我已经检查了所有类的名称，但没有发现任何问题。除此之外，控制台也没有显示任何问题，但当我点击按钮时，仍然没有发生任何事情。这是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>


计算器
自动控制
德尔
/
1.
2.
3.
*
4.
5.
6.
+
7.
8.
9
-
.
0
=

这是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 = '';
})

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'）；
对于（变量i=0；i

U缺少三个
1） 将querySelector设置为节点列表的querySelectorAll
2） 写下这个BTN的inspide[i]
3） 初始化currOp.value

const btns=document.queryselectoral（'.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=“”；
对于（变量i=0；i


计算器
自动控制
德尔
/
1.
2.
3.
*
4.
5.
6.
+
7.
8.
9
-
.
0
=
const btns=document.querySelector（'.btn'）
您可能需要.querySelectorAll（）
.querySelector仅选择单个元素，并且循环从未运行。我将.querySelector（）更改为.querySelectorAll（）但现在控制台说它无法读取undefinedthank的属性'getAttribute'，但仍然有一个问题。它可以工作，但不会出现在当前屏幕上。因此它只出现在控制台上，因为您需要使用innerHTML来填充值。因为值是用于输入的。但是你的元素是div，所以你需要说innerHTML。我编辑了答案。谢谢，终于得到了！