计算器项目 - 卡住 - javascript

Question

我一直坚持让这个计算器工作......所以基本上如果我按等于键，我的计算器就可以工作，（1 + 2 = 3）......但我想让它工作，即使用户只按运算符，比如1+4/5+2，这样即使只按运算符也会自动计算。

\n

这是我的代码：

\n

\r\n

\r\n

// DOM elements \nconst numberButton = document.querySelectorAll(\'.number\');\nconst operatorButton = document.querySelectorAll(\'.operator\');\nconst clearButton = document.querySelector(\'.clear\');\nconst deleteButton = document.querySelector(\'.delete\')\nconst showResult = document.querySelector(\'.result\');\nconst currentOperand = document.querySelector(\'.current-operand\');\nconst previousOperand = document.querySelector(\'.previous-operand\');\nconst equalsKey = document.querySelector(\'.equals-key\');\n\ncurrentOperand.textContent = \' \';\npreviousOperand.textContent = \' \';\n\n// Sum of a, b ... \nfunction add(a, b) {\n  return a + b;\n};\n\n// Subtraction of a and b ...\nfunction subtract(a, b) {\n  return a - b;\n};\n\n// Multiply a, b ... \nfunction multiply(a, b) {\n  return a * b;\n};\n\n// Divide a,b ... \nfunction divide(a, b) {\n  return a / b;\n};\n\n// Create a new function operate that takes an operator and 2 numbers and then calls one of the above functions on the numbers.\nfunction operate(num1, num2, operator) {\n  switch (operator) {\n    case "+":\n      return add(num1, num2);\n    case "-":\n      return subtract(num1, num2);\n    case "*":\n      return multiply(num1, num2);\n    case "/":\n      return divide(num1, num2);\n  }\n};\n\n//Create the functions that populate the display when you click the \n//number buttons\xe2\x80\xa6 you should be storing the \xe2\x80\x98display value\xe2\x80\x99 in a variable somewhere \n//for use in the next step.\n\nlet storedNumber = \'\';\nlet clickedOperator = \'\'\nlet firstNumber = \'\';\nlet result = \'\';\ncurrentOperand.textContent = 0;\n\n\nnumberButton.forEach((number) => {\n  number.addEventListener(\'click\', function() {\n    storedNumber += number.value;\n    currentOperand.textContent = storedNumber;\n  })\n});\n\noperatorButton.forEach((operator => {\n  operator.addEventListener(\'click\', function() {\n\n    // save the first number\n    firstNumber = storedNumber;\n\n    // get the operator that was clicked\n    clickedOperator = operator.textContent;\n    previousOperand.textContent = storedNumber + clickedOperator;\n    storedNumber = \'\';\n\n    console.log(\'FirstNumber\' + firstNumber + \'Stored\' + storedNumber)\n    console.log(clickedOperator);\n\n  })\n}));\n\nequalsKey.addEventListener(\'click\', function() {\n  // when equals key is clicked call operate() function\n  result = operate(parseFloat(firstNumber), parseFloat(storedNumber), clickedOperator)\n  // update content of current operation with result and previous operand with the calculation, make storedNumber = result\n  currentOperand.textContent = result;\n  previousOperand.textContent = firstNumber + \' \' + clickedOperator + \' \' + storedNumber;\n  storedNumber = result;\n  console.log(\'FirstNumber\' + firstNumber + \'Stored\' + storedNumber)\n})

\r\n

*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  font-weight: normal;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);\n  font-family: sans-serif;\n}\n\n.calculator-container {\n  display: grid;\n  justify-content: center;\n  align-content: center;\n  min-height: 100vh;\n  grid-template-columns: repeat(4, 100px);\n  grid-template-rows: minmax(120px, auto) repeat(5, 100px);\n}\n\n.two-cols {\n  grid-column: span 2;\n}\n\n.calculator-container>button {\n  cursor: pointer;\n  font-size: 2rem;\n  border: 1px solid #4289a7;\n  outline: none;\n  background-color: #f69d3c;\n  opacity: 80%;\n  border-radius: 5px;\n}\n\n.calculator-container>button:hover {\n  opacity: 100%;\n}\n\n.calculator-display {\n  grid-column: 1 / -1;\n}\n\n.calculator-display {\n  background-color: #efd7a5;\n  border: 1px solid #4289a7;\n  opacity: 80%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding: 10px;\n  padding-top: 39px;\n  padding-bottom: 5px;\n  border-radius: 5px;\n}\n\n.calculator-display .previous-operand {\n  font-size: 1.5rem;\n}\n\n.calculator-display .current-operand {\n  font-size: 2.5rem;\n  padding-top: 7px;\n}

\r\n

!\n<!DOCTYPE html>\n<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->\n<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->\n<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->\n<!--[if gt IE 8]><!-->\n<html class="no-js">\n<!--<![endif]-->\n\n<head>\n  <meta charset="utf-8">\n  <meta http-equiv="X-UA-Compatible" content="IE=edge">\n  <title>Calculator Odin Project</title>\n  <meta name="description" content="">\n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <link rel="stylesheet" href="/style.css">\n</head>\n\n<body>\n  <!--Create a basic HTML calculator with buttons for each digit, each of the above functions and an \xe2\x80\x9cEquals\xe2\x80\x9d key.\n        \n            Do not worry about wiring up the JS just yet.\n            There should also be a display for the calculator, go ahead and fill it with some dummy numbers so you can get it looking right.\n            Add a \xe2\x80\x9cclear\xe2\x80\x9d button.\n        -->\n\n  <div class="calculator-container">\n    <div class="calculator-display">\n      <div class="previous-operand">3214</div>\n      <div class="current-operand">324324</div>\n    </div>\n\n    <button class="two-cols clear">AC</button>\n    <button class="delete">DEL</button>\n    <button class="operator">/</button>\n    <button class="number" value="1">1</button>\n    <button class="number" value="2">2</button>\n    <button class="number" value="3">3</button>\n    <button class="operator">*</button>\n    <button class="number" value="4">4</button>\n    <button class="number" value="5">5</button>\n    <button class="number" value="6">6</button>\n    <button class="operator">+</button>\n    <button class="number" value="7">7</button>\n    <button class="number" value="8">8</button>\n    <button class="number" value="9">9</button>\n    <button class="operator">-</button>\n    <button class="number">.</button>\n    <button class="number" value="0">0</button>\n    <button class="equals-key two-cols result">=</button>\n\n  </div>\n\n  <script src="/index.js" async defer></script>\n</body>\n\n</html>\n\n\n<!--Create a basic HTML calculator with buttons for each digit, each of the above functions and an \xe2\x80\x9cEquals\xe2\x80\x9d key.\n\n    Do not worry about wiring up the JS just yet.\n    There should also be a display for the calculator, go ahead and fill it with some dummy numbers so you can get it looking right.\n    Add a \xe2\x80\x9cclear\xe2\x80\x9d button.\n-->

\r\n

\r\n

\r\n

\n

Answer 1

将计算和显示结果的代码提取到一个单独的函数中。然后您可以从equals事件侦听器和所有操作按钮的事件侦听器调用它。

\n

\r\n

\r\n

// DOM elements \nconst numberButton = document.querySelectorAll(\'.number\');\nconst operatorButton = document.querySelectorAll(\'.operator\');\nconst clearButton = document.querySelector(\'.clear\');\nconst deleteButton = document.querySelector(\'.delete\')\nconst showResult = document.querySelector(\'.result\');\nconst currentOperand = document.querySelector(\'.current-operand\');\nconst previousOperand = document.querySelector(\'.previous-operand\');\nconst equalsKey = document.querySelector(\'.equals-key\');\n\ncurrentOperand.textContent = \' \';\npreviousOperand.textContent = \' \';\n\n// Sum of a, b ... \nfunction add(a, b) {\n  return a + b;\n};\n\n// Subtraction of a and b ...\nfunction subtract(a, b) {\n  return a - b;\n};\n\n// Multiply a, b ... \nfunction multiply(a, b) {\n  return a * b;\n};\n\n// Divide a,b ... \nfunction divide(a, b) {\n  return a / b;\n};\n\n// Create a new function operate that takes an operator and 2 numbers and then calls one of the above functions on the numbers.\nfunction operate(num1, num2, operator) {\n  switch (operator) {\n    case "+":\n      return add(num1, num2);\n    case "-":\n      return subtract(num1, num2);\n    case "*":\n      return multiply(num1, num2);\n    case "/":\n      return divide(num1, num2);\n  }\n};\n\n//Create the functions that populate the display when you click the \n//number buttons\xe2\x80\xa6 you should be storing the \xe2\x80\x98display value\xe2\x80\x99 in a variable somewhere \n//for use in the next step.\n\nlet storedNumber = \'\';\nlet clickedOperator = \'\'\nlet firstNumber = \'\';\nlet result = \'\';\ncurrentOperand.textContent = 0;\n\n\nnumberButton.forEach((number) => {\n  number.addEventListener(\'click\', function() {\n    storedNumber += number.value;\n    currentOperand.textContent = storedNumber;\n  })\n});\n\noperatorButton.forEach((operator => {\n  operator.addEventListener(\'click\', function() {\n    if (firstNumber && storedNumber) {\n      displayResult();\n    }\n    // save the first number\n    firstNumber = storedNumber;\n\n    // get the operator that was clicked\n    clickedOperator = operator.textContent;\n    previousOperand.textContent = storedNumber + clickedOperator;\n    storedNumber = \'\';\n\n    console.log(\'FirstNumber\' + firstNumber + \'Stored\' + storedNumber)\n    console.log(clickedOperator);\n\n  })\n}));\n\nequalsKey.addEventListener(\'click\', function() {\n  displayResult();\n});\n\nfunction displayResult() {\n  result = operate(parseFloat(firstNumber), parseFloat(storedNumber), clickedOperator)\n  // update content of current operation with result and previous operand with the calculation, make storedNumber = result\n  currentOperand.textContent = result;\n  previousOperand.textContent = firstNumber + \' \' + clickedOperator + \' \' + storedNumber;\n  storedNumber = result;\n  console.log(\'FirstNumber\' + firstNumber + \'Stored\' + storedNumber);\n}

\r\n

*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  font-weight: normal;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);\n  font-family: sans-serif;\n}\n\n.calculator-container {\n  display: grid;\n  justify-content: center;\n  align-content: center;\n  min-height: 100vh;\n  grid-template-columns: repeat(4, 100px);\n  grid-template-rows: minmax(120px, auto) repeat(5, 100px);\n}\n\n.two-cols {\n  grid-column: span 2;\n}\n\n.calculator-container>button {\n  cursor: pointer;\n  font-size: 2rem;\n  border: 1px solid #4289a7;\n  outline: none;\n  background-color: #f69d3c;\n  opacity: 80%;\n  border-radius: 5px;\n}\n\n.calculator-container>button:hover {\n  opacity: 100%;\n}\n\n.calculator-display {\n  grid-column: 1 / -1;\n}\n\n.calculator-display {\n  background-color: #efd7a5;\n  border: 1px solid #4289a7;\n  opacity: 80%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding: 10px;\n  padding-top: 39px;\n  padding-bottom: 5px;\n  border-radius: 5px;\n}\n\n.calculator-display .previous-operand {\n  font-size: 1.5rem;\n}\n\n.calculator-display .current-operand {\n  font-size: 2.5rem;\n  padding-top: 7px;\n}

\r\n

!\n<!DOCTYPE html>\n<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->\n<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->\n<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->\n<!--[if gt IE 8]><!-->\n<html class="no-js">\n<!--<![endif]-->\n\n<head>\n  <meta charset="utf-8">\n  <meta http-equiv="X-UA-Compatible" content="IE=edge">\n  <title>Calculator Odin Project</title>\n  <meta name="description" content="">\n  <meta name="viewport" content="width=device-width, initial-scale=1">\n  <link rel="stylesheet" href="/style.css">\n</head>\n\n<body>\n  <!--Create a basic HTML calculator with buttons for each digit, each of the above functions and an \xe2\x80\x9cEquals\xe2\x80\x9d key.\n        \n            Do not worry about wiring up the JS just yet.\n            There should also be a display for the calculator, go ahead and fill it with some dummy numbers so you can get it looking right.\n            Add a \xe2\x80\x9cclear\xe2\x80\x9d button.\n        -->\n\n  <div class="calculator-container">\n    <div class="calculator-display">\n      <div class="previous-operand">3214</div>\n      <div class="current-operand">324324</div>\n    </div>\n\n    <button class="two-cols clear">AC</button>\n    <button class="delete">DEL</button>\n    <button class="operator">/</button>\n    <button class="number" value="1">1</button>\n    <button class="number" value="2">2</button>\n    <button class="number" value="3">3</button>\n    <button class="operator">*</button>\n    <button class="number" value="4">4</button>\n    <button class="number" value="5">5</button>\n    <button class="number" value="6">6</button>\n    <button class="operator">+</button>\n    <button class="number" value="7">7</button>\n    <button class="number" value="8">8</button>\n    <button class="number" value="9">9</button>\n    <button class="operator">-</button>\n    <button class="number">.</button>\n    <button class="number" value="0">0</button>\n    <button class="equals-key two-cols result">=</button>\n\n  </div>\n\n  <script src="/index.js" async defer></script>\n</body>\n\n</html>\n\n\n<!--Create a basic HTML calculator with buttons for each digit, each of the above functions and an \xe2\x80\x9cEquals\xe2\x80\x9d key.\n\n    Do not worry about wiring up the JS just yet.\n    There should also be a display for the calculator, go ahead and fill it with some dummy numbers so you can get it looking right.\n    Add a \xe2\x80\x9cclear\xe2\x80\x9d button.\n-->

\r\n

\r\n

\r\n

\n