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

如何解决防止运算符在计算器中连续显示多次

我用纯 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 函数存在安全（和性能）问题，我强烈建议去掉 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>