javascript - Javascript中计算器的等号按钮的事件侦听器无法正常工作

Question

我正在尝试用 Javascript 制作一个计算器，当您按下等号按钮时，它会在输入框中输出结果，但它仅适用于加法而不适用于其他操作。将不胜感激任何帮助

代码

let inputBox = document.querySelector('.input-number');
let numArea = document.querySelector('.nums');

let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let btn3 = document.querySelector('.btn3');
let btn4 = document.querySelector('.btn4');
let btn5 = document.querySelector('.btn5');
let btn6 = document.querySelector('.btn6');
let btn7 = document.querySelector('.btn7');
let btn8 = document.querySelector('.btn8');
let btn9 = document.querySelector('.btn9');
let btn0 = document.querySelector('.btn0');
let btnEqual = document.querySelector('.btn-equals');
let btnAdd = document.querySelector('.btn-add');
let btnSubtract = document.querySelector('.btn-subtract');
let btnMultiply = document.querySelector('.btn-multiply');
let btnDivide = document.querySelector('.btn-divide');
let btnClear = document.querySelector('.btn-clear');
let btnDelete = document.querySelector('.btn-delete');

let addition = false;
let subtraction = false;
let multiplication = false;
let division = false;
let previousValue;
let result;

btn1.addEventListener('click', button1);
btn2.addEventListener('click', button2);
btn3.addEventListener('click', button3);
btn4.addEventListener('click', button4);
btn5.addEventListener('click', button5);
btn6.addEventListener('click', button6);
btn7.addEventListener('click', button7);
btn8.addEventListener('click', button8);
btn9.addEventListener('click', button9);
btn0.addEventListener('click', button0);
btnEqual.addEventListener('click', Equals);
btnAdd.addEventListener('click', Addition);
btnSubtract.addEventListener('click', Subtraction);
btnMultiply.addEventListener('click', Multiplication);
btnDivide.addEventListener('click', Division);
// btnClear.addEventListener('click', Clear);
// btnDelete.addEventListener('click', Deletion);

function button1(e) {
  e.preventDefault();
  inputBox.value += 1
}

function button2(e) {
  e.preventDefault();
  inputBox.value += 2
}

function button3(e) {
  e.preventDefault();
  inputBox.value += 3;
}

function button4(e) {
  e.preventDefault();
  inputBox.value += 4;
}

function button5(e) {
  e.preventDefault();
  inputBox.value += 5;
}

function button6(e) {
  e.preventDefault();
  inputBox.value += 6;
}

function button7(e) {
  e.preventDefault();
  inputBox.value += 7;
}

function button8(e) {
  e.preventDefault();
  inputBox.value += 8;
}

function button9(e) {
  e.preventDefault();
  inputBox.value += 9;
}

function button0(e) {
  e.preventDefault();
  inputBox.value += 0;
}

// function Decimal(e) {
//  e.preventDefault();
//  inputBox.type = 'text';
//  inputBox.value+=".";
//  inputBox.type = 'text';
// }
function Addition(e) {
  e.preventDefault();
  previousValue = inputBox.value;
  inputBox.value = '';
  addition = true;
}

function Subtraction(e) {
  previousValue = inputBox.value;
  inputBox.value = '';
  subtraction = true;
}

function Multiplication(e) {
  previousValue = inputBox.value;
  inputBox.value = '';
  multiplication = true;
}

function Division(e) {
  previousValue = inputBox.value;
  inputBox.value = '';
  division = true;
}

function Equals(e) {
  e.preventDefault();
  if (addition == true) {
    result = parseInt(previousValue) + parseInt(inputBox.value);
    inputBox.value = result;
  }
  else if (subtraction == true) {
    console.log('success');
    result = parseInt(previousValue) - parseInt(inputBox.value);
    inputBox.value = result;
  } else if (multiplication == true) {
    console.log('success');
    result = parseInt(previousValue) * parseInt(inputBox.value);
    inputBox.value = result;
  } else if (division == true) {
    console.log('success');
    result = parseInt(previousValue) / parseInt(inputBox.value);
    inputBox.value = result;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form action="" class="my-form">
  <input type="number" class="input-number form-control">
  <button type="" class="btn btn-dark btn7">7</button>
  <button type="" class="btn btn-dark btn8">8</button>
  <button type="" class="btn btn-dark btn9">9</button>
  <button type="" class="btn btn-dark btn4">4</button>
  <button type="" class="btn btn-dark btn5">5</button>
  <button type="" class="btn btn-dark btn6">6</button>
  <button type="" class="btn btn-dark btn1">1</button>
  <button type="" class="btn btn-dark btn2">2</button>
  <button type="" class="btn btn-dark btn3">3</button>
  <button type="" class="btn btn-dark btn0">0</button>
  <button type="" class="btn btn-dark btn-equals">=</button>

  <button type="" class="btn btn-dark btn-add">+</button>
  <button type="" class="btn btn-dark btn-subtract">-</button>
  <button type="" class="btn btn-dark btn-multiply">X</button>
  <button type="" class="btn btn-dark btn-divide">/</button>
  <button type="" class="btn btn-dark btn-clear">CE</button>
  <button type="" class="btn btn-dark btn-delete">Delete</button>

</form>

等于功能无法正常工作。它位于代码的末尾。

控制台中没有错误，如果有添加，它可以工作，但如果有任何其他操作，它根本不会做任何事情。我在这里先向您的帮助表示感谢

标签： javascripthtml

Answer 1

你的代码让我笑了很多，但不要误会我的意思，我绝对不是在取笑你。我只是想，“天哪，想想我也像 12 年前那样用这种方式编写代码！” 今天在我看来，这就像来自另一个时代的代码，但同样，我不是在开玩笑，初学者这样写是完全正常的，如果我在 12 年后达到同样的水平，那就不正常了。

这是您的小计算器的逻辑改进版本，它有 30 行而不是 145 行，无需手动选择每个按钮并逐个连接每个听众。我希望它能帮助你学习和提高。

其他一些观众可能也会嘲笑我的代码，因为我从不使用纯 JS 编写代码（我使用 Angular 和 Typescript），也因为我使用 eval（并且“eval 是邪恶的”等），但这里有：

const numArea = document.querySelector('.nums'),
  buttons = document.querySelectorAll('button[data-value]');

let stringToEval = "";

const clickHandler = event => {
  const value = event.target.attributes["data-value"].nodeValue;
  stringToEval += value;
  inputBox.value = stringToEval;
}

const execute = () => {
  inputBox.value = eval(stringToEval)
  stringToEval = "";
}

const clear = () => {
  inputBox.value = "";
  stringToEval = "";
}

const del = () => {
  stringToEval = stringToEval.slice(0, -1);
  inputBox.value = stringToEval;
}

buttons.forEach(btn => btn.addEventListener("click", clickHandler));
btnEquals.addEventListener("click", execute);
btnClear.addEventListener("click", clear);
btnDelete.addEventListener("click", del);

<div>
  <input id="inputBox" class="form-control">
  <br>
  <button data-value="7" type="" class="btn btn-dark">7</button>
  <button data-value="8" type="" class="btn btn-dark">8</button>
  <button data-value="9" type="" class="btn btn-dark">9</button>
  <br>
  <button data-value="4" type="" class="btn btn-dark">4</button>
  <button data-value="5" type="" class="btn btn-dark">5</button>
  <button data-value="6" type="" class="btn btn-dark">6</button>
  <br>
  <button data-value="1" type="" class="btn btn-dark">1</button>
  <button data-value="2" type="" class="btn btn-dark">2</button>
  <button data-value="3" type="" class="btn btn-dark">3</button>
  <br>
  <button data-value="0" type="" class="btn btn-dark">0</button>
  <br>
  <button data-value="+" type="" class="btn btn-dark btn-add">+</button>
  <button data-value="-" type="" class="btn btn-dark btn-subtract">-</button>
  <button data-value="*" type="" class="btn btn-dark btn-multiply">X</button>
  <button data-value="/" type="" class="btn btn-dark btn-divide">/</button>
  <button type="" id="btnEquals" class="btn btn-dark">=</button>
  <br>
  <button type="" id="btnClear" class="btn btn-dark btn-clear">CE</button>
  <button type="" id="btnDelete" class="btn btn-dark">Delete</button>
</div>