防止运算符在计算器中连续显示多次答案

【问题标题】：Prevent operators displaying multiple times in a row in calculator防止运算符在计算器中连续显示多次
【发布时间】：2021-03-22 12:11:25
【问题描述】：

我用纯 JavaScript 做了一个简单的计算器。

function display(val) {
  document.getElementById("result").value += val;
}

function solve() {
  let x = document.getElementById("result").value
  let y = eval(x)
  
  document.getElementById("result").value = y
}

function clr() {
  document.getElementById("result").value = ""
}

<div class="app-wrapper">
  <div class="calc-wrapper">
    <div class="calc-display">
      <input type="text" id="result">
    </div>
    <div class="button-cont">
      <div class="row row-1">
        <div class="button ac" onclick="clr()">AC</div>
        <div onclick="display('/')" class="button operator">/</div>
      </div>
      <div class="row row-2">
        <div onclick="display('7')" class="button digit">7</div>
        <div onclick="display('8')" class="button digit">8</div>
        <div onclick="display('9')" class="button digit">9</div>
        <div onclick="display('*')" class="button operator">*</div>
      </div>
      <div class="row row-3">
        <div onclick="display('4')" class="button digit">4</div>
        <div onclick="display('5')" class="button digit">5</div>
        <div onclick="display('6')" class="button digit">6</div>
        <div onclick="display('-')" class="button operator">-</div>
      </div>
      <div class="row row-4">
        <div onclick="display('1')" class="button digit">1</div>
        <div onclick="display('2')" class="button digit">2</div>
        <div onclick="display('3')" class="button digit">3</div>
        <div onclick="display('+')" class="button operator">+</div>
      </div>
      <div class="row row-5">
        <div onclick="display('0')" class="button digit zero">0</div>
        <div onclick="display('.')" class="button digit">.</div>
        <div onclick="solve()" class="button operator">=</div>
      </div>
    </div>
  </div>
</div>

现在我有一些关于运营商的问题。当我输入 plus 不止一次时，我不希望它显示不止一次。与/、*、-、+ 和 . 相同。

【问题讨论】：

你做了什么来尝试解决这个问题？
你不应该使用eval()。它存在性能和安全问题。
好吧，使用逻辑。当您输入内容时，您正在调用display。在该函数中，您可以查看input 中已有的内容。所以检查最后一个字符；如果是同一个运算符，则不要将运算符添加到input。
我们几乎每天都会收到这样的问题。您可能还想在表达式的开头或结尾防止二元运算符，处理浮点精度，处理eval 安全性等等。这太宽泛了。 Stack Overflow 不是免费的代码编写服务；尝试考虑如何解决这个问题。使用可用的String 和RegExp API。
@Sebastian Simon：打开 devtool 控制台也可以做任何事情。如果人们知道在该输入字段中写什么来乱七八糟，他们就知道如何打开控制台。

标签： javascript html calculator

【解决方案1】：

您可以建立一个运算符列表并将其与输入值和当前结果进行比较。

注意：由于 eval 函数存在的安全（和性能）问题，我强烈建议去掉 eval 函数。

我还建议使用 javascript 事件处理程序而不是内联事件处理程序。

function display(val) {
  //Create a list of all operators of the calculator
  let operators = [...document.querySelectorAll('.operator')].map(el => el.textContent);
  
  //Get the current value
  let resultElement = document.querySelector('#result');
  let currentResult = resultElement.value;
  
  //When the input is an operator and the last character of the result is an operator then overwrite it, otherwise append it.
  if(operators.includes(val) && operators.includes(currentResult.charAt(currentResult.length - 1))) {
    resultElement.value = currentResult.substring(0, currentResult.length - 1) + val;
  }
  else {
    resultElement.value += val;
  }
}

function solve() {
  let x = document.getElementById("result").value
  let y = eval(x)
  document.getElementById("result").value = y
}

function clr() {
  document.getElementById("result").value = ""
}

<div class="app-wrapper">
  <div class="calc-wrapper">
    <div class="calc-display">
      <input type="text" id="result">
    </div>
    <div class="button-cont">
      <div class="row row-1">
        <div class="button ac" onclick="clr()">AC</div>
        <div onclick="display('/')" class="button operator">/</div>
      </div>
      <div class="row row-2">
        <div onclick="display('7')" class="button digit">7</div>
        <div onclick="display('8')" class="button digit">8</div>
        <div onclick="display('9')" class="button digit">9</div>
        <div onclick="display('*')" class="button operator">*</div>
      </div>
      <div class="row row-3">
        <div onclick="display('4')" class="button digit">4</div>
        <div onclick="display('5')" class="button digit">5</div>
        <div onclick="display('6')" class="button digit">6</div>
        <div onclick="display('-')" class="button operator">-</div>
      </div>
      <div class="row row-4">
        <div onclick="display('1')" class="button digit">1</div>
        <div onclick="display('2')" class="button digit">2</div>
        <div onclick="display('3')" class="button digit">3</div>
        <div onclick="display('+')" class="button operator">+</div>
      </div>
      <div class="row row-5">
        <div onclick="display('0')" class="button digit zero">0</div>
        <div onclick="display('.')" class="button digit">.</div>
        <div onclick="solve()" class="button operator">=</div>
      </div>
    </div>
  </div>
</div>

【讨论】：