浏览器计算器将数字追加到错误屏幕

Question

当前，计算器允许在显示错误消息时将数字和运算符附加到屏幕上。例如：如果输入2 + x-2 = ERROR，则可以随后继续在屏幕上添加数字/运算符。我将如何解决该错误的任何建议将不胜感激。非常感谢。

document.addEventListener("DOMContentLoaded", function() {

  const keys = document.querySelectorAll("span") //selects all keys within container
  const display = document.querySelector("#screen") //selects caluclator screen to display
  let array = []
  let operators = ["÷", "x", "-", "+"]

  //testing different types of mathematical operators

  let divide = function(x, y) {
    if (y === 0) {
      return "Error"
    } else {
      return x / y
    }
  }

  let multiply = function(x, y) {
    return x * y
  }

  let add = function(x, y) {
    return x + y
  }

  let subract = function(x, y) {
    return x - y
  }

  //click function for each button event - clear, equals, mathematical operators, cannot compute

  keys.forEach(function(button) {
    button.addEventListener("click", function() {

      if (button.id !== "clear" || button.id !== "equals") {
        display.textContent += button.textContent
      }

      if (button.id === "clear") {
        display.textContent = ""
      }

      if (button.id === "equals") {
        operators.forEach(function(calc) {

          if ((display.textContent).includes(calc)) {
            array = (display.textContent.split(calc))

            let x = parseInt(array[0])
            let y = parseInt(array[1])

            if (calc === "÷") {
              display.textContent = divide(x, y)
            }

            if (calc === "x") {
              display.textContent = multiply(x, y)
            }

            if (calc === "+") {
              display.textContent = add(x, y)
            }

            if (calc === "-") {
              display.textContent = subract(x, y)
            }

            if (display.textContent === "NaN") {
              display.textContent = "Cannot compute"
            }
          }
        })
      }
    })
  })
})

@import url(http://fonts.googleapis.com/css?family=Oswald:700|Orbitron);
body {
  background: gray;
  box-sizing: border-box;
  margin: 0;
  padding: 20px;
  width: 100%;
}

#calculator {
  background: #2B3D50;
  border-radius: 20px;
  padding: 15px;
  width: 335px;
  margin-left: auto;
  margin-right: auto;
}

#screen-container {
  background: #5E626D;
  border-radius: 10px;
  padding: 20px;
}

#screen {
  background: #EF5D5D;
  border: none;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4em;
  font-weight: 600;
  height: 23px;
  overflow: hidden;
  padding: 12px 15px;
  width: 265px;
  z-index: 1;
}

#zero {
  width: 225px;
}

#clear {
  background: #CF7C43;
  width: 147px;
}

#clear:active {
  background-color: #E67E22;
}

#equals {
  height: 89px;
}

#buttons-container {
  padding: 30px 0 0 15px;
}

.l-row {
  position: absolute;
  top: 354px;
}

.buttons {
  overflow: hidden;
}

.buttons span {
  background: #3383D2;
  border-radius: 3px;
  border: none;
  box-shadow: inset 0px 1px 0px #5E626D, 0px 5px 0px 0px #45637F;
  cursor: pointer;
  float: left;
  font-family: 'Oswald', sans-serif;
  width: 70px;
  height: 40px;
  margin: 0 7px 11px 0;
  line-height: 40px;
  text-align: center;
}

.buttons span:active {
  background-color: #4AA3DF;
  top: 3px;
  box-shadow: inset 0px 1px 0px #5E626D, 0px 2px 0px 0px #45637F;
}

.operator {
  font-size: 1.3em;
}

<div id="calculator">
  <div id="screen-container">
    <div id="screen"></div>
  </div>

  <div id="buttons-container">
    <div class="buttons">
      <span class="operator" id="clear">C</span>
      <span class="operator">÷</span>
      <span class="operator">x</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span class="operator">-</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span class="operator">+</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span class="operator" id="equals">=</span>
      <div class="l-row">
        <span id="zero">0</span>
      </div>
    </div>
  </div>
</div>

Answer 1

单击按钮时，请检查显示内容是否包含Error或Cannot compute。如果是这样，请先清除它。

此外，if (button.id !== "clear" || button.id !== "equals")应该使用&&。参见Why non-equality check of one variable against many values always returns true?

document.addEventListener("DOMContentLoaded", function() {

  const keys = document.querySelectorAll("span") //selects all keys within container
  const display = document.querySelector("#screen") //selects caluclator screen to display
  let array = []
  let operators = ["÷", "x", "-", "+"]

  //testing different types of mathematical operators

  let divide = function(x, y) {
    if (y === 0) {
      return "Error"
    } else {
      return x / y
    }
  }

  let multiply = function(x, y) {
    return x * y
  }

  let add = function(x, y) {
    return x + y
  }

  let subract = function(x, y) {
    return x - y
  }

  //click function for each button event - clear, equals, mathematical operators, cannot compute

  keys.forEach(function(button) {
    button.addEventListener("click", function() {

      if (display.textContent === "Error" || display.textContent === "Cannot compute") {
        display.textContent = "";
      }

      if (button.id !== "clear" && button.id !== "equals") {
        display.textContent += button.textContent
      } else if (button.id === "clear") {
        display.textContent = ""
      } else if (button.id === "equals") {
        operators.forEach(function(calc) {

          if ((display.textContent).includes(calc)) {
            array = (display.textContent.split(calc))

            let x = parseInt(array[0])
            let y = parseInt(array[1])

            if (calc === "÷") {
              display.textContent = divide(x, y)
            }

            if (calc === "x") {
              display.textContent = multiply(x, y)
            }

            if (calc === "+") {
              display.textContent = add(x, y)
            }

            if (calc === "-") {
              display.textContent = subract(x, y)
            }

            if (display.textContent === "NaN") {
              display.textContent = "Cannot compute"
            }
          }
        })
      }
    })
  })
})

@import url(http://fonts.googleapis.com/css?family=Oswald:700|Orbitron);
body {
  background: gray;
  box-sizing: border-box;
  margin: 0;
  padding: 20px;
  width: 100%;
}

#calculator {
  background: #2B3D50;
  border-radius: 20px;
  padding: 15px;
  width: 335px;
  margin-left: auto;
  margin-right: auto;
}

#screen-container {
  background: #5E626D;
  border-radius: 10px;
  padding: 20px;
}

#screen {
  background: #EF5D5D;
  border: none;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4em;
  font-weight: 600;
  height: 23px;
  overflow: hidden;
  padding: 12px 15px;
  width: 265px;
  z-index: 1;
}

#zero {
  width: 225px;
}

#clear {
  background: #CF7C43;
  width: 147px;
}

#clear:active {
  background-color: #E67E22;
}

#equals {
  height: 89px;
}

#buttons-container {
  padding: 30px 0 0 15px;
}

.l-row {
  position: absolute;
  top: 354px;
}

.buttons {
  overflow: hidden;
}

.buttons span {
  background: #3383D2;
  border-radius: 3px;
  border: none;
  box-shadow: inset 0px 1px 0px #5E626D, 0px 5px 0px 0px #45637F;
  cursor: pointer;
  float: left;
  font-family: 'Oswald', sans-serif;
  width: 70px;
  height: 40px;
  margin: 0 7px 11px 0;
  line-height: 40px;
  text-align: center;
}

.buttons span:active {
  background-color: #4AA3DF;
  top: 3px;
  box-shadow: inset 0px 1px 0px #5E626D, 0px 2px 0px 0px #45637F;
}

.operator {
  font-size: 1.3em;
}

<div id="calculator">
  <div id="screen-container">
    <div id="screen"></div>
  </div>

  <div id="buttons-container">
    <div class="buttons">
      <span class="operator" id="clear">C</span>
      <span class="operator">÷</span>
      <span class="operator">x</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span class="operator">-</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span class="operator">+</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span class="operator" id="equals">=</span>
      <div class="l-row">
        <span id="zero">0</span>
      </div>
    </div>
  </div>
</div>