Javascript 計算器。 如何停止多個操作數？
[英]Javascript calculator. How to stop multiple operands?
問題描述
我一直在研究計算器，作為自己的學習項目。 它工作正常，但我無法弄清楚如何阻止人們添加應用程序中斷輸入，例如 1++-*/4。 我嘗試了各種方法，例如將當前顯示拆分為一個數組並將其與另一個數組與所有運算符進行比較。 我也試過 if(output.includes(input){ blah blah }。
我嘗試向getbuttonpress添加一個額外的 else if ，它是這樣的 else if(input == "*" || input == "+" || input == "/" || input = "-"){do某事}這對我來說並不奏效。
有人可以解釋一些我可以用來解決問題的不同方法嗎？
這是我的代碼：
var resultDisplayed = false; function getButtonPress() { var input = this.value; if (input == "=") { console.log("bang"); getResult(); } else if (resultDisplayed && input < 10) { document.getElementById("output").innerHTML = input; resultDisplayed = false; } else { document.getElementById("output").innerHTML += input; console.log(input); resultDisplayed = false; } } window.onload = function() { [].slice.call(document.getElementsByClassName("button")).forEach(function(e) { e.addEventListener('click', getButtonPress); }); }; function getResult() { var result = document.getElementById("output").innerHTML; var resultCalculated = eval(result); console.log(resultCalculated); document.getElementById("output").innerHTML = resultCalculated; resultDisplayed = true; }
/* Fonts from Google Fonts - more at https://fonts.google.com */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); @import url('https://fonts.googleapis.com/css?family=Merriweather:400,700'); body { background-color: white; font-family: "Open Sans", sans-serif; font-size: 18px; color: #444; text-align: center; } h1 { font-family: "Merriweather", serif; font-size: 32px; } #calculator { width: 250px; height: 400px; position: absolute; background-color: grey; padding: 15px; box-shadow: 5px 5px 5px 5px; margin: auto; } .button { width: 19%; height: 70px; box-shadow: 1px 1px 1px 1px; border: 1px solid black; display: inline-block; margin: 5px; } .buttonContainer { width: 95%; margin: auto; margin-top: 10px; } #screen { width: 90%; height: 15%; background-color: green; margin: auto; color: white; text-align: right; overflow: hidden; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Calculator</h1> <div id="calculator"> <div id="screen"> <h1 id="output">0</h1> </div> <div class="buttonContainer"> <button class="button" value="7"> <h1 class = "number">7</h1> </button> <button class="button" value="8"> <h1 class = "number">8</h1> </button> <button class="button" value="9"> <h1 class = "number">9</h1> </button> <button class="button" value="+"> <h1 class = "number">+</h1> </button> <button class="button" value="4"> <h1 class = "number">4</h1> </button> <button class="button" value="5"> <h1 class = "number">5</h1> </button> <button class="button" value="6"> <h1 class = "number">6</h1> </button> <button class="button" value="-"> <h1 class = "operator">-</h1> </button> <button class="button" value="1"> <h1 class = "number">1</h1> </button> <button class="button" value="2"> <h1 class = "number">2</h1> </button> <button class="button" value="3"> <h1 class = "number">3</h1> </button> <button class="button" value="*"> <h1 class = "operator">*</h1> </button> <button class="button" value="."> <h1 class = "operator">.</h1> </button> <button class="button" value="0"> <h1 class = "number">0</h1> </button> <button class="button" value="="> <h1 class = "operator">=</h1> </button> <button class="button" value="/"> <h1 class = "operator">/</h1> </button> </div> </div> <script src="script.js"></script> </body> </html>
6 個解決方案
解決方案1
2 2017-07-19 13:17:35
將以下代碼添加到您的 getButtonPress 函數中
它將檢查當前輸入和前一個條目是否都是運算符。
如果是，它將用新的運算符替換之前的運算符
var element=document.getElementById("output");
if (/[+-\/*]/.test(this.value) && /[+-\/*]$/.test(element.innerHTML)) {
element.innerHTML = element.innerHTML.replace(element.innerHTML[element.innerHTML.length - 1], '');
}
var resultDisplayed = false; function getButtonPress() { var input; var element=document.getElementById("output"); if (/[+-\\/*]/.test(this.value) && /[+-\\/*]$/.test(element.innerHTML)) { element.innerHTML = element.innerHTML.replace(element.innerHTML[element.innerHTML.length - 1], ''); } input = this.value; if (input == "=") { console.log("bang"); getResult(); } else if (resultDisplayed && input < 10) { document.getElementById("output").innerHTML = input; resultDisplayed = false; } else { document.getElementById("output").innerHTML += input; resultDisplayed = false; } } window.onload = function() { [].slice.call(document.getElementsByClassName("button")).forEach(function(e) { e.addEventListener('click', getButtonPress); }); }; function getResult() { var result = document.getElementById("output").innerHTML; var resultCalculated = eval(result); console.log(resultCalculated); document.getElementById("output").innerHTML = resultCalculated; resultDisplayed = true; }
/* Fonts from Google Fonts - more at https://fonts.google.com */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); @import url('https://fonts.googleapis.com/css?family=Merriweather:400,700'); body { background-color: white; font-family: "Open Sans", sans-serif; font-size: 18px; color: #444; text-align: center; } h1 { font-family: "Merriweather", serif; font-size: 32px; } #calculator { width: 250px; height: 400px; position: absolute; background-color: grey; padding: 15px; box-shadow: 5px 5px 5px 5px; margin: auto; } .button { width: 19%; height: 70px; box-shadow: 1px 1px 1px 1px; border: 1px solid black; display: inline-block; margin: 5px; } .buttonContainer { width: 95%; margin: auto; margin-top: 10px; } #screen { width: 90%; height: 15%; background-color: green; margin: auto; color: white; text-align: right; overflow: hidden; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Calculator</h1> <div id="calculator"> <div id="screen"> <h1 id="output">0</h1> </div> <div class="buttonContainer"> <button class="button" value="7"> <h1 class = "number">7</h1> </button> <button class="button" value="8"> <h1 class = "number">8</h1> </button> <button class="button" value="9"> <h1 class = "number">9</h1> </button> <button class="button" value="+"> <h1 class = "number">+</h1> </button> <button class="button" value="4"> <h1 class = "number">4</h1> </button> <button class="button" value="5"> <h1 class = "number">5</h1> </button> <button class="button" value="6"> <h1 class = "number">6</h1> </button> <button class="button" value="-"> <h1 class = "operator">-</h1> </button> <button class="button" value="1"> <h1 class = "number">1</h1> </button> <button class="button" value="2"> <h1 class = "number">2</h1> </button> <button class="button" value="3"> <h1 class = "number">3</h1> </button> <button class="button" value="*"> <h1 class = "operator">*</h1> </button> <button class="button" value="."> <h1 class = "operator">.</h1> </button> <button class="button" value="0"> <h1 class = "number">0</h1> </button> <button class="button" value="="> <h1 class = "operator">=</h1> </button> <button class="button" value="/"> <h1 class = "operator">/</h1> </button> </div> </div> <script src="script.js"></script> </body> </html>
解決方案2
0 已采納 2017-07-19 13:10:49
添加了try catch語句。
這可能不是最好的解決方案。 您應該構建某種解析器，但這也能很好地工作。
var resultDisplayed = false; //1++-*/4 function getButtonPress() { var input = this.value; if (input == "=") { //console.log("bang"); getResult(); } else if (resultDisplayed && input < 10) { document.getElementById("output").innerHTML = input; resultDisplayed = false; } else { document.getElementById("output").innerHTML += input; //console.log(input); resultDisplayed = false; } } window.onload = function() { [].slice.call(document.getElementsByClassName("button")).forEach(function(e) { e.addEventListener('click', getButtonPress); }); }; function getResult() { try{ var result = document.getElementById("output").innerHTML; var resultCalculated = eval(result); console.log(resultCalculated); document.getElementById("output").innerHTML = resultCalculated; resultDisplayed = true; }catch(e){ console.log("Invalid expression"); document.getElementById("output").innerHTML = 0; } }
/* Fonts from Google Fonts - more at https://fonts.google.com */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); @import url('https://fonts.googleapis.com/css?family=Merriweather:400,700'); body { background-color: white; font-family: "Open Sans", sans-serif; font-size: 18px; color: #444; text-align: center; } h1 { font-family: "Merriweather", serif; font-size: 32px; } #calculator { width: 250px; height: 400px; position: absolute; background-color: grey; padding: 15px; box-shadow: 5px 5px 5px 5px; margin: auto; } .button { width: 19%; height: 70px; box-shadow: 1px 1px 1px 1px; border: 1px solid black; display: inline-block; margin: 5px; } .buttonContainer { width: 95%; margin: auto; margin-top: 10px; } #screen { width: 90%; height: 15%; background-color: green; margin: auto; color: white; text-align: right; overflow: hidden; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Calculator</h1> <div id="calculator"> <div id="screen"> <h1 id="output">0</h1> </div> <div class="buttonContainer"> <button class="button" value="7"> <h1 class = "number">7</h1> </button> <button class="button" value="8"> <h1 class = "number">8</h1> </button> <button class="button" value="9"> <h1 class = "number">9</h1> </button> <button class="button" value="+"> <h1 class = "number">+</h1> </button> <button class="button" value="4"> <h1 class = "number">4</h1> </button> <button class="button" value="5"> <h1 class = "number">5</h1> </button> <button class="button" value="6"> <h1 class = "number">6</h1> </button> <button class="button" value="-"> <h1 class = "operator">-</h1> </button> <button class="button" value="1"> <h1 class = "number">1</h1> </button> <button class="button" value="2"> <h1 class = "number">2</h1> </button> <button class="button" value="3"> <h1 class = "number">3</h1> </button> <button class="button" value="*"> <h1 class = "operator">*</h1> </button> <button class="button" value="."> <h1 class = "operator">.</h1> </button> <button class="button" value="0"> <h1 class = "number">0</h1> </button> <button class="button" value="="> <h1 class = "operator">=</h1> </button> <button class="button" value="/"> <h1 class = "operator">/</h1> </button> </div> </div> <script src="script.js"></script> </body> </html>
解決方案3
0 2017-07-19 13:20:44
getButtonPress的最后else必須如下所示：
else {
var operators = ["+", "-", "*", "/", "."],
lastCharacter = document.getElementById("output").innerHTML[document.getElementById("output").innerHTML.length - 1];
if(!operators.includes(lastCharacter) || !operators.includes(input)){
document.getElementById("output").innerHTML += input;
console.log(input);
resultDisplayed = false;
}
}
直覺上，
!operators.includes(lastCharacter) || !operators.includes(input)
可以認為是邏輯表達式
operators.includes(lastCharacter) → ¬operators.includes(input)
這意味着“如果最后一個字符是運算符，則下一個輸入不是運算符” 。 如果是這種情況，符號會添加到輸出屏幕，否則不會。
這仍然不會阻止您輸入2.5.6數字或以運算符結束表達式，但這解決了所描述的問題。
解決方案4
0 2017-07-19 15:17:50
另一個選項，在調用getResult()時刪除開始中的0並刪除最后一個字符中的操作數
var resultDisplayed = false; function getButtonPress() { var input = this.value, output = document.getElementById("output"); if(input == "=") { //console.log("bang"); getResult(); } else if(resultDisplayed && input < 10) { output.innerHTML = input; resultDisplayed = false; } else { //console.log(input); var currentValue = output.innerHTML; // start with 0 + digit, delete it if((currentValue+input).match(/^0\\d/)){ input = input; } // end with +-*/ delete it else if(currentValue.match(/[-\\+\\*\\/]$/) && input.match(/[-\\+\\*\\/]/)) { input = currentValue.slice(0, -1) +''+ input; } else{ input = currentValue + input } output.innerHTML = input; resultDisplayed = false; } } [].slice.call(document.getElementsByClassName("button")).forEach(function(e) { e.addEventListener('click', getButtonPress); }); function getResult() { var result = document.getElementById("output").innerHTML; if(result.match(/[-\\+\\*\\/]$/)) result = result.slice(0, -1); var resultCalculated = eval(result); console.log(resultCalculated); document.getElementById("output").innerHTML = resultCalculated; resultDisplayed = true; }
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); @import url('https://fonts.googleapis.com/css?family=Merriweather:400,700'); body { background-color: white; font-family: "Open Sans", sans-serif; font-size: 18px; color: #444; text-align: center; } h1 { font-family: "Merriweather", serif; font-size: 32px; } #calculator { width: 250px; height: 400px; position: absolute; background-color: grey; padding: 15px; box-shadow: 5px 5px 5px 5px; margin: auto; } .button { width: 19%; height: 70px; box-shadow: 1px 1px 1px 1px; border: 1px solid black; display: inline-block; margin: 5px; } .buttonContainer { width: 95%; margin: auto; margin-top: 10px; } #screen { width: 90%; height: 15%; background-color: green; margin: auto; color: white; text-align: right; overflow: hidden; }
<h1>Calculator</h1> <div id="calculator"> <div id="screen"> <h1 id="output">0</h1> </div> <div class="buttonContainer"> <button class="button" value="7"> <h1 class="number">7</h1> </button> <button class="button" value="8"> <h1 class="number">8</h1> </button> <button class="button" value="9"> <h1 class="number">9</h1> </button> <button class="button" value="+"> <h1 class="number">+</h1> </button> <button class="button" value="4"> <h1 class="number">4</h1> </button> <button class="button" value="5"> <h1 class="number">5</h1> </button> <button class="button" value="6"> <h1 class="number">6</h1> </button> <button class="button" value="-"> <h1 class="operator">-</h1> </button> <button class="button" value="1"> <h1 class="number">1</h1> </button> <button class="button" value="2"> <h1 class="number">2</h1> </button> <button class="button" value="3"> <h1 class="number">3</h1> </button> <button class="button" value="*"> <h1 class="operator">*</h1> </button> <button class="button" value="."> <h1 class="operator">.</h1> </button> <button class="button" value="0"> <h1 class="number">0</h1> </button> <button class="button" value="="> <h1 class="operator">=</h1> </button> <button class="button" value="/"> <h1 class="operator">/</h1> </button> </div> </div>
解決方案5
0 2020-02-04 05:38:26
這是不接受多個操作數的代碼
function calc(opr)
{
var a2=0;
var a1 = cal.display.value;
a2 = a1.charAt(a1.length-1);
if(a2 == '/' || a2 == '+' || a2 == '-' || a2 == '*')
{
cal.display.value = a1.substring(0,a1.length-1);
cal.display.value += opr;
}
else
{
cal.display.value+= opr;
}
}
解決方案6
-1 2017-07-19 13:11:40
每當您單擊任何操作數按鈕時，您都需要從輸入中獲取最后一個 val 並查看它是否是操作數之一，如果它像下面一樣跳過。
$('#button-plus').click(function() {
var lastChar = $('#disp').val().slice(-1);
var firstChar = $('#disp').val().slice(0);
if (lastChar == '*' || lastChar == '-' || lastChar == '+' || lastChar == '/' || lastChar == '.' || lastChar == '(' || lastChar == '%'){
// DO NOTHING
}
else if (firstChar == '0'){
// DO NOTHING
}
else {
addChar(this.form.display, '+');
}
$('#disp').removeClass("result");
dotCount = 0;
});
我是Javascript的新手，正在研究計算器。 如何獲取num1，num2和運算符變量
[英]I am new to Javascript and working on a calculator. How can I get num1, num2 and operators variables
僅除法按鈕在JavaScript計算器中正常工作。 其他運算符的“無法讀取未定義的屬性'toString'”錯誤
[英]Only divide button is working properly in JavaScript calculator. “Cannot read property 'toString' of undefined” errors for other operators
嘗試學習javascript。 在退休計算器上工作。 需要循環建議
[英]Trying to learn javascript. Working on retirement calculator. Need Loop advice
Js初學者計算器。 如果第一個字符串是運算符，如何使第一個字符串為空
[英]Js beginner calculator. How to make the first string empty in case it's an operator
我在我的小項目 Calculator 上執行 JavaScript 實現時遇到了一些錯誤。 伙計們，你能幫幫我嗎？
[英]I am encountering some errors while doing the JavaScript implementation on my little project, Calculator. Can you help me, guys?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何使歷史記錄功能成為計算器。 在JavaScript中
所得稅計算器的未定義輸出。 JavaScript
我是Javascript的新手，正在研究計算器。 如何獲取num1，num2和運算符變量
javascript 計算器中的操作數無法按預期工作
僅除法按鈕在JavaScript計算器中正常工作。 其他運算符的“無法讀取未定義的屬性'toString'”錯誤
嘗試學習javascript。 在退休計算器上工作。 需要循環建議
Js初學者計算器。 如果第一個字符串是運算符，如何使第一個字符串為空
如何在javascript計算器中防止多個小數
Javascript計算器如何允許多個點
我在我的小項目 Calculator 上執行 JavaScript 實現時遇到了一些錯誤。 伙計們，你能幫幫我嗎？
相關標簽