Javascript计算器。如何停止多个操作数？

Question

我一直在研究计算器作为我自己的学习项目。它工作得很好，除了我无法弄清楚如何阻止人们添加应用程序破坏输入，如1 ++ - * / 4。我尝试了各种各样的事情，比如将我当前的显示器拆分成一个数组，并将它与所有操作符的另一个数组进行比较。我也试过if（output.includes（输入）{blah blah}。

我尝试向13. export enum StepType { 14. Start = 'S', 15. Activity = 'A', 16. Decision = 'D', 17. End = 'E' 18. } 添加一个额外的if，如果（input ==“*”|| input ==“+”|| input ==“/”|| input） =“ - ”）{做某事} 它对我来说并不合适。

有人可以解释我可以用来解决问题的一些不同方法吗？

这是我的代码：

getbuttonpress

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;
}

Answer 1

将以下代码添加到getButtonPress函数

它将检查当前输入和前一个条目是否都是运算符。

如果是，它将用新的操作符替换前一个操作符

var element=document.getElementById("output");
  if (/[+-\/*]/.test(this.value) && /[+-\/*]$/.test(element.innerHTML)) {
    element.innerHTML = element.innerHTML.replace(element.innerHTML[element.innerHTML.length - 1], '');
  }

＆＃13;

＆＃13;

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;
}

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加了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>

Answer 3

else中的最终getButtonPress必须如下所示：

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之类的数字或使用运算符结束表达式，但这解决了所描述的问题。

Answer 4

另一个选项，在0调用

时，在开始时删除getResult()并删除最后一个字符中的操作数

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>

Answer 5

这是不接受多个操作数的代码

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Answer 6

无论何时单击任何操作数按钮，您都需要从输入中获取最后一个val，并查看其中一个操作数，如果它是如下所示跳过。

jQuery('#my_searchform select').change(function() {
    if(!($("#select1").val()||$("#select2").val()||$("#select3").val()||$("#select4").val())){
        jQuery('.reset').hide();
    }else{
        jQuery('.reset').show();
    }});