防止运算符在计算器中连续显示多次
Prevent operators displaying multiple times in a row in calculator
我用纯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>
我用纯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>