為什么計算器工作不正常？

Question

我正在嘗試使用香草JS做我的第一個計算器。 我的邏輯如下。

• 您單擊一個數字（1/2）
• 您擊中一個標志（正/負）
• 您單擊第二個數字
• 您擊中等於並得到答案。

我的equals按鈕通過加號和減號獲得不同的功能。 但是，它不能正常工作。 1 - 2 = -1但是當您執行+2 ，結果是-3而不是1 。

怎么了？

 var screen = document.getElementById('hres'); var numI = 0; var numII = 0; document.getElementById('one').addEventListener("click", uno); function uno() { screen.value = 1; } document.getElementById('two').addEventListener("click", duo); function duo() { screen.value = 2; } function plus() { numI = screen.value; document.getElementById('eql').addEventListener('click', equalP); } function equalP() { numII = screen.value; screen.value = +numI + +numII; } function minus() { numI = screen.value; document.getElementById('eql').addEventListener('click', equalM); } function equalM() { numII = screen.value; screen.value = numI - numII; } 

 #hres { position: relative; text-align: center; line-height: 50px; font-size: 22pt; width: 200px; height: 50px; margin-bottom: 65px; } #sum { display: inline-block; font-size: 20pt; border: 2px solid black; margin: 5px; text-align: center; line-height: 50px; width: 200px; height: 50px; background-color: goldenrod; } #one { display: inline-block; font-size: 20pt; width: 50px; height: 50px; background-color: hotpink; text-align: center; line-height: 50px; border: 2px solid black; } #two { display: inline-block; font-size: 20pt; width: 50px; height: 50px; background-color: hotpink; text-align: center; line-height: 50px; border: 2px solid black; } #eql { display: inline-block; font-size: 20pt; border: 2px solid black; margin: 5px; text-align: center; line-height: 50px; width: 200px; height: 50px; background-color: skyblue; transition: .3s; } #sub { display: inline-block; font-size: 20pt; border: 2px solid black; margin: 5px; text-align: center; line-height: 50px; width: 200px; height: 50px; background-color: lightgray; } 

 <input id="hres" readonly></input><br> <div id="one">1</div> <div id="two">2</div><br> <button onclick="plus()" id="sum">+</button> <button onclick="minus()" id="sub">-</button> <button id="eql">=</button> 

Answer 1

首先讓我們確定問題所在：

1. 每次單擊加號或減號時，您正在為equals按鈕注冊事件監聽器。 這意味着事件功能將運行多達注冊的次數，並會影響您的結果
2. 您沒有重新調整變量。 在equals之后，您希望numI成為新的總數，以便可以將下一個運算值存儲在num2中，然后對equals執行正確的計算

要實現這一點，需要對代碼進行相當多的重構。 我在評論中強調了重要的內容：

// Register all events once, and once only.
document.getElementById('sum').addEventListener("click", plus);
document.getElementById('sub').addEventListener("click", minus);
document.getElementById('eql').addEventListener('click', equal);
document.getElementById('one').addEventListener("click", uno);
document.getElementById('two').addEventListener("click", duo);

// Get input element for display purposes.
var screen = document.getElementById('hres');

// Variables to hold the numbers we are working with, and the operation symbol.
var numI = 0;
var numII = 0;
var operation = null;

// Simple functions to handle each number button.
// You could use a data-* attribute and have a sinle generic function.
function uno() {
  setNumber(1);
}

function duo() {
  setNumber(2);
}

// Function that processes any number provided.
// The key here is to check if the user has click an operations button,
// if so then we want to set the second variable. Otherwise set the first.
function setNumber(n) {
  screen.value = n;
  if (operation)
    numII = n;
  else
    numI = n;
}

// Basic functions to set the operation type. Again, data-* attribute would be useful.
function plus() {
  operation = '+';
}

function minus() {
  operation = '-';
}

// Function to calculate result.
// Here we check what the operation is and apply the correct logic to match.
// Importantly, at the end, we assign the result to numI so it is ready for the next operation.
function equal() {
  var result = 'err';
  if (operation == '+')
    result = numI + numII;
  else if (operation == '-')
    result = numI - numII;
  numI = result;
  screen.value = result;
}

這是一個工作示例。

---

注意：即使進行了這些更改，也不能對用戶輸入進行任何驗證。 這在很大程度上取決於用戶以正確的順序按下按鈕（即數字>操作>數字>等於>操作/數字等）。 如果您想進一步改進代碼，則應考慮這一點，但是我不能以此為答案提供此問題。