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 实现时遇到了一些错误。 伙计们，你能帮帮我吗？
相关标签