防止運算符在計算器中連續顯示多次

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>

現在我有一些關於運營商的問題。 當我輸入 plus 不止一次時，我不希望它顯示不止一次。 與/ 、 * 、 - 、 +和 相同. .

Answer 1

您可以構建運算符列表並將其與輸入值和當前結果進行比較。

注意：由於 eval function 的安全（和性能）問題，我強烈建議去掉 eval function。

我還建議使用 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>