Question

我正在尝试使用HTML，CSS和JavaScript编写一个计算器应用程序，到目前为止，已经能够在显示屏上填充数字和运算符。

我正试图找到一种方法，将数字（作为整数）从运算符中分离出来，希望以后再对它们运行运算函数以完成计算。

但是，我真的很难将数字和运算符分开。一个典型的数组如下所示：

["9", "8", "7", "+", "3"]

我研究了join()和parseInt()，但看不到如何确定循环中数组元素之间的差异。

请在下面找到我的完整JS和HTML代码。任何建议将不胜感激。

JS

const add = (num1, num2) => num1 + num2
const subtract = (num1, num2) => num1 - num2
const multiply = (num1, num2) => num1 * num2
const divide = (num1, num2) => num1 / num2
let textView = document.querySelector('input[data- 
view]')
let calculation = []

// type numbers into the calculator display.
document.querySelector('div[data-behavior="btn- 
container"]').addEventListener('click', function (e) {
  if (e.target.dataset.input === 'number') {
calculation.push(e.target.value)
textView.value = calculation.join('')
}
})
// type operators into the calculator display
document.querySelector('div[data-behavior="btn-container"]').addEventListener('click', function (e) {
  if (e.target.dataset.input === 'operator') {
    calculation.push(e.target.value)
    textView.value = calculation.join('')
  }
})

HTML

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>

    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class='calculator-container'>
      <div class = 'display-container'>
        <form>
          <input data-view class = 'textView'>
        </form>
      </div>
      <div class = 'button-container' data-behavior='btn-container'>
        <button class = 'number'data-input = 'number' value = 7>7</button>
        <button class = 'number'data-input = 'number' value = 8>8</button>
        <button class = 'number'data-input = 'number' value = 9>9</button>
        <button class = 'operatot' data-input = 'operator' value = />/</button>
        <button class = 'number'data-input = 'number' value = 4>4</button>
        <button class = 'number'data-input = 'number' value = 5>5</button>
        <button class = 'number'data-input = 'number' value = 6>6</button>
        <button class = 'operator' data-input='operator' value = X >X</button>
        <button class = 'number' data-input = 'number' value = 1>1</button>
        <button class = 'number'data-input = 'number' value = 2>2</button>
        <button class = 'number'data-input = 'number' value = 3>3</button>
        <button class = 'number'data-input = 'number' value = 0>0</button>
        <button class='operator' data-input='operator' value = ->-</button>
        <button class='operator' data-input='operator' value = +>+</button>
        <button data-behavior='equals'>=</button>
        <button data-behavior='clear' value = 'clear'>AC</button>
      </div>
    </div>
    <script src="calculator.js" ></script>
  </body>
</html>

Answer 1

第一件事是，在我看来，您还没有完全弄清计算器的行为方式。在按下数字按钮之前先按操作员按钮会发生什么？如果您连续打两个数字会怎样？您支持小数还是整数？（您可能已经决定不这样做。）“等于”按钮在哪里？清除按钮在哪里？

第二件事是，您在未完全弄清楚逻辑的情况下就投入了代码。如果这样做，我将设置两个单击事件处理程序，一个用于您的number类，一个用于您的operator类。每个逻辑都不相关，因此它们不应成为同一功能的一部分（功能基本上应该坚持做一件事情）。我将拥有三个变量：第一个数字，选定的运算符和第二个数字；我也会像你一样拥有一个数组。我还要添加一个等于按钮和一个清除按钮。（对于清除按钮，我将添加另一个特定于它的事件处理程序，并为其指定自己的类名。）我的逻辑将运行以下内容：

从用户那里获得一个号码。存储到您的阵列中。
只要用户不断按下数字按钮，就将其继续推入数组。
当用户点击运算符时，请将其存储到currentOperator或任何您想调用的位置。将您的数组解析为整数。将结果存储到num1。清空阵列。
从用户那里获取另一个号码，存储到您的数组中，重复步骤2。
当用户单击“等于”按钮时，请再次将数组解析为整数。将结果存储到num2。评估currentOperator。执行适当的操作并显示结果。
如果用户点击清除，则清空您的数组并重置变量。

无论您打算做什么，在开始编写之前都需要知道它是什么。编写代码不会告诉您要编写什么代码。

如何使用Javascript解析数组中的整数和运算符？

1 个答案: