防止运算符在计算器中一行多次显示

Question

我用纯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>

现在我有一些关于操作员的问题。当我多次键入加号时，我不希望它显示多次。与/、*、-、+和.相同。

Answer 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>