为什么这个javascript计算器不能用?

问题描述 投票:-2回答:1

我试着用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>

这是html文件: 这是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 = '';
})
javascript calculator
1个回答
0
投票

你有三个缺失

1) 将Nodelist的querySelector改为querySelectorAll。

2) 在btns[i]的后面写上这个激励。

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>
© www.soinside.com 2019 - 2024. All rights reserved.