javascript - 计算器项目 - 卡住

javascript - 计算器项目 - 卡住 - javascript

转载作者：行者123 更新时间：2023-12-04 16:26:22

我坚持让这个计算器工作......所以基本上我的计算器工作，如果我按下等于键，(1 + 2 = 3)......但我想让它工作，即使用户只按下操作符，比如1+4/5+2，这样即使只按操作符也能自动计算。
这是我的代码:

// DOM elements 
const numberButton = document.querySelectorAll('.number');
const operatorButton = document.querySelectorAll('.operator');
const clearButton = document.querySelector('.clear');
const deleteButton = document.querySelector('.delete')
const showResult = document.querySelector('.result');
const currentOperand = document.querySelector('.current-operand');
const previousOperand = document.querySelector('.previous-operand');
const equalsKey = document.querySelector('.equals-key');

currentOperand.textContent = ' ';
previousOperand.textContent = ' ';

// Sum of a, b ... 
function add(a, b) {
  return a + b;
};

// Subtraction of a and b ...
function subtract(a, b) {
  return a - b;
};

// Multiply a, b ... 
function multiply(a, b) {
  return a * b;
};

// Divide a,b ... 
function divide(a, b) {
  return a / b;
};

// Create a new function operate that takes an operator and 2 numbers and then calls one of the above functions on the numbers.
function operate(num1, num2, operator) {
  switch (operator) {
    case "+":
      return add(num1, num2);
    case "-":
      return subtract(num1, num2);
    case "*":
      return multiply(num1, num2);
    case "/":
      return divide(num1, num2);
  }
};

//Create the functions that populate the display when you click the 
//number buttons… you should be storing the ‘display value’ in a variable somewhere 
//for use in the next step.

let storedNumber = '';
let clickedOperator = ''
let firstNumber = '';
let result = '';
currentOperand.textContent = 0;


numberButton.forEach((number) => {
  number.addEventListener('click', function() {
    storedNumber += number.value;
    currentOperand.textContent = storedNumber;
  })
});

operatorButton.forEach((operator => {
  operator.addEventListener('click', function() {

    // save the first number
    firstNumber = storedNumber;

    // get the operator that was clicked
    clickedOperator = operator.textContent;
    previousOperand.textContent = storedNumber + clickedOperator;
    storedNumber = '';

    console.log('FirstNumber' + firstNumber + 'Stored' + storedNumber)
    console.log(clickedOperator);

  })
}));

equalsKey.addEventListener('click', function() {
  // when equals key is clicked call operate() function
  result = operate(parseFloat(firstNumber), parseFloat(storedNumber), clickedOperator)
  // update content of current operation with result and previous operand with the calculation, make storedNumber = result
  currentOperand.textContent = result;
  previousOperand.textContent = firstNumber + ' ' + clickedOperator + ' ' + storedNumber;
  storedNumber = result;
  console.log('FirstNumber' + firstNumber + 'Stored' + storedNumber)
})

*,
*::before,
*::after {
  box-sizing: border-box;
  font-weight: normal;
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
  font-family: sans-serif;
}

.calculator-container {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.two-cols {
  grid-column: span 2;
}

.calculator-container>button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid #4289a7;
  outline: none;
  background-color: #f69d3c;
  opacity: 80%;
  border-radius: 5px;
}

.calculator-container>button:hover {
  opacity: 100%;
}

.calculator-display {
  grid-column: 1 / -1;
}

.calculator-display {
  background-color: #efd7a5;
  border: 1px solid #4289a7;
  opacity: 80%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10px;
  padding-top: 39px;
  padding-bottom: 5px;
  border-radius: 5px;
}

.calculator-display .previous-operand {
  font-size: 1.5rem;
}

.calculator-display .current-operand {
  font-size: 2.5rem;
  padding-top: 7px;
}

!
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Calculator Odin Project</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <!--Create a basic HTML calculator with buttons for each digit, each of the above functions and an “Equals” key.
        
            Do not worry about wiring up the JS just yet.
            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.
            Add a “clear” button.
        -->

  <div class="calculator-container">
    <div class="calculator-display">
      <div class="previous-operand">3214</div>
      <div class="current-operand">324324</div>
    </div>

    <button class="two-cols clear">AC</button>
    <button class="delete">DEL</button>
    <button class="operator">/</button>
    <button class="number" value="1">1</button>
    <button class="number" value="2">2</button>
    <button class="number" value="3">3</button>
    <button class="operator">*</button>
    <button class="number" value="4">4</button>
    <button class="number" value="5">5</button>
    <button class="number" value="6">6</button>
    <button class="operator">+</button>
    <button class="number" value="7">7</button>
    <button class="number" value="8">8</button>
    <button class="number" value="9">9</button>
    <button class="operator">-</button>
    <button class="number">.</button>
    <button class="number" value="0">0</button>
    <button class="equals-key two-cols result">=</button>

  </div>

  <script src="/index.js" async defer></script>
</body>

</html>


<!--Create a basic HTML calculator with buttons for each digit, each of the above functions and an “Equals” key.

    Do not worry about wiring up the JS just yet.
    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.
    Add a “clear” button.
-->

最佳答案

将计算和显示结果的代码提取到一个单独的函数中。然后你可以从 equals 调用它事件监听器和所有运算符(operator)按钮的事件监听器。

// DOM elements 
const numberButton = document.querySelectorAll('.number');
const operatorButton = document.querySelectorAll('.operator');
const clearButton = document.querySelector('.clear');
const deleteButton = document.querySelector('.delete')
const showResult = document.querySelector('.result');
const currentOperand = document.querySelector('.current-operand');
const previousOperand = document.querySelector('.previous-operand');
const equalsKey = document.querySelector('.equals-key');

currentOperand.textContent = ' ';
previousOperand.textContent = ' ';

// Sum of a, b ... 
function add(a, b) {
  return a + b;
};

// Subtraction of a and b ...
function subtract(a, b) {
  return a - b;
};

// Multiply a, b ... 
function multiply(a, b) {
  return a * b;
};

// Divide a,b ... 
function divide(a, b) {
  return a / b;
};

// Create a new function operate that takes an operator and 2 numbers and then calls one of the above functions on the numbers.
function operate(num1, num2, operator) {
  switch (operator) {
    case "+":
      return add(num1, num2);
    case "-":
      return subtract(num1, num2);
    case "*":
      return multiply(num1, num2);
    case "/":
      return divide(num1, num2);
  }
};

//Create the functions that populate the display when you click the 
//number buttons… you should be storing the ‘display value’ in a variable somewhere 
//for use in the next step.

let storedNumber = '';
let clickedOperator = ''
let firstNumber = '';
let result = '';
currentOperand.textContent = 0;


numberButton.forEach((number) => {
  number.addEventListener('click', function() {
    storedNumber += number.value;
    currentOperand.textContent = storedNumber;
  })
});

operatorButton.forEach((operator => {
  operator.addEventListener('click', function() {
    if (firstNumber && storedNumber) {
      displayResult();
    }
    // save the first number
    firstNumber = storedNumber;

    // get the operator that was clicked
    clickedOperator = operator.textContent;
    previousOperand.textContent = storedNumber + clickedOperator;
    storedNumber = '';

    console.log('FirstNumber' + firstNumber + 'Stored' + storedNumber)
    console.log(clickedOperator);

  })
}));

equalsKey.addEventListener('click', function() {
  displayResult();
});

function displayResult() {
  result = operate(parseFloat(firstNumber), parseFloat(storedNumber), clickedOperator)
  // update content of current operation with result and previous operand with the calculation, make storedNumber = result
  currentOperand.textContent = result;
  previousOperand.textContent = firstNumber + ' ' + clickedOperator + ' ' + storedNumber;
  storedNumber = result;
  console.log('FirstNumber' + firstNumber + 'Stored' + storedNumber);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-weight: normal;
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
  font-family: sans-serif;
}

.calculator-container {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.two-cols {
  grid-column: span 2;
}

.calculator-container>button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid #4289a7;
  outline: none;
  background-color: #f69d3c;
  opacity: 80%;
  border-radius: 5px;
}

.calculator-container>button:hover {
  opacity: 100%;
}

.calculator-display {
  grid-column: 1 / -1;
}

.calculator-display {
  background-color: #efd7a5;
  border: 1px solid #4289a7;
  opacity: 80%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10px;
  padding-top: 39px;
  padding-bottom: 5px;
  border-radius: 5px;
}

.calculator-display .previous-operand {
  font-size: 1.5rem;
}

.calculator-display .current-operand {
  font-size: 2.5rem;
  padding-top: 7px;
}

!
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Calculator Odin Project</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/style.css">
</head>

<body>
  <!--Create a basic HTML calculator with buttons for each digit, each of the above functions and an “Equals” key.
        
            Do not worry about wiring up the JS just yet.
            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.
            Add a “clear” button.
        -->

  <div class="calculator-container">
    <div class="calculator-display">
      <div class="previous-operand">3214</div>
      <div class="current-operand">324324</div>
    </div>

    <button class="two-cols clear">AC</button>
    <button class="delete">DEL</button>
    <button class="operator">/</button>
    <button class="number" value="1">1</button>
    <button class="number" value="2">2</button>
    <button class="number" value="3">3</button>
    <button class="operator">*</button>
    <button class="number" value="4">4</button>
    <button class="number" value="5">5</button>
    <button class="number" value="6">6</button>
    <button class="operator">+</button>
    <button class="number" value="7">7</button>
    <button class="number" value="8">8</button>
    <button class="number" value="9">9</button>
    <button class="operator">-</button>
    <button class="number">.</button>
    <button class="number" value="0">0</button>
    <button class="equals-key two-cols result">=</button>

  </div>

  <script src="/index.js" async defer></script>
</body>

</html>


<!--Create a basic HTML calculator with buttons for each digit, each of the above functions and an “Equals” key.

    Do not worry about wiring up the JS just yet.
    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.
    Add a “clear” button.
-->

关于javascript - 计算器项目 - 卡住 - javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63058457/

文章推荐： storybook - 如何在 Storybook 6.0 中自定义深色和浅色主题

文章推荐： node.js - 如何在 Gatsby 中使用 React.lazy

文章推荐： ruby-on-rails - 在 RSpec 中比较十进制值的正确方法

ios - 锁定/解锁 iPhone 时 AVCapture session 卡住/卡住
我正在我的 xamarin.forms 应用程序中实现扫描仪功能，为此我正在使用 iOS native AVCaptureSession。但我的问题是在扫描或捕获 session 处于事件状态并且设备
ios媒体选择器仅显示白屏/卡住
所以我目前正在为我的项目制作一个音乐应用程序，它允许用户创建自己的音乐播放列表。但是，当我单击显示媒体选择器按钮时，它只显示白屏，当包含媒体选择器的 View 是 Initial View Contr
Android 模拟器没有响应 - 卡住
当我尝试在模拟器中启动 AVD 时，会出现一个小窗口(见图片)，5 秒后它说没有响应并一直保持这种状态直到我关闭它。我在网上搜索并尝试了所有解决方案，但都没有成功在 BIOS 中启用了虚拟化已安
FFMPEG 帧提取 - 卡住
尝试使用以下命令从视频中提取特定帧(删除了文件的特定名称!: ffmpeg -i video.mp4 -vf "select-gte(n\,6956)"-vframes 10262 文件夹/帧%d.j
ubuntu - 卡住/工作终端？
我怎么知道终端正在继续工作而不中断它？我已经运行了以下 git 命令: clone git://ligo-vcs.phys.uwm.edu/lalsuite.gituote 一段时间后它似乎被卡住了
wpf - 滚动时Datagrid挂起/卡住
我对 WPF 中的数据网格有一个奇怪的问题。我正在为我的应用程序使用 MVVM 模式，并且我的 View 模型实现了 idataerrorinfo 接口(interface)。每当我在添加新行后在我的
输入数据时 Excel 卡住
我有这个 Excel 文件，当我输入数据时它卡住了。例如，我双击一个单元格，输入数据，然后按“输入”。它会卡住而不是进入下面的细胞。按几次“enter”不会解冻程序，唯一有效的是用鼠标选择另一个单元格
c# - 如何知道线程池中的线程挂起/卡住
我有线程池的任务队列，每个任务都有卡住锁定其正在使用的所有资源的倾向。并且除非重新启动服务，否则这些无法释放。 ThreadPool 中有没有办法知道它的线程已经被卡住？我有一个使用超时的想法(虽然我
prolog - 卡住/2个目标阻止已变得无法访问的变量
我制作了以下小程序来确定内存是否用于 freeze(X,Goal) 之类的目标回收时 X变得无法访问: %:- use_module(library(freeze)). % Ciao Prolog n
Java JFrame 卡住
我有一个使用 swing 的简单 java 应用程序。然而，当我执行程序时，框架将会出现，但我无法单击任何地方，并且按钮仅在几秒钟后出现。我对 javas Swing 库非常陌生，所以我可能会丢失一些
Java GUI 卡住
我正在尝试创建一个简单的 TCP 客户端服务器应用程序接口(interface)用户可以在按下相应按钮时启动或停止服务器我创建了一个 StartServer 按钮，当用户按下按钮时它应该连接到服务
Java FTPClient 卡住
我正在尝试从 ftp 服务器下载文件，但在检索文件时卡住了。我正在使用 commons-net-3.6.jar 我注意到的事情当我使用 ftpClient.enterRemotePassiveMod
c++ - SearchPathW 卡住
我正在尝试编写一个函数，该函数将能够找到位于我系统上的可执行文件搜索路径中的任意可执行文件。我遇到了一些输入会导致 SearchPathW 的问题无限期地卡住，我不确定到底发生了什么。 std::op
Nativescript RadSideDrawer 卡住
我的 Nativescript 应用程序的许多页面中都有 RadSideDrawer。主应用程序组件有一个 page-router-outlet并且所有其他页面都通过导航加载到此组件中。带抽屉的页面包
Java - 套接字 - 卡住
我有一个最小的服务器，它等待客户端连接，然后他启动一个线程，将回复发送回客户端，问题是回复。这是服务器的代码: int port = 1234; ServerSocket servSock =
c# - 操作繁忙时表单不执行任何操作(卡住)
我有一个使用 C# 的 WinForms 应用程序。我尝试从文件中读取一些数据并将其插入到数据表中。虽然此操作很忙，但我的表单卡住并且我无法移动它。有谁知道我该如何解决这个问题？最佳答案这可能是因
Javafx GUI 卡住
在我们学校最新的项目中，我遇到了一些问题。我想观察新条目的路径，该路径是由文件导向器按钮选择的，但如果我选择任何文件，整个窗口都会卡住...我猜它被卡住，因为调用了“observePath”方法，但我
输入一百万时 Java 卡住
当我输入一百万作为输入数字时，我的程序卡住了。我该如何解决这个问题？我尝试将第二个 for 循环分离为第二个函数，但没有成功。 import java.io.*; public class Arra
java - transformClassesWithDexBuilderForDebug 卡住
早上好编译我的应用程序时，我在 Android Studio 上遇到问题。我在构建时没有收到关于 app:transformClassesWithDexBuilderForDebug 的任何输出错误，
应用触发器时 PHPMYAdmin 卡住
我正在使用以下触发器 DELIMITER ; CREATE TRIGGER updateCount AFTER INSERT ON user_info FOR EACH ROW BEGIN UPDA

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 计算器项目 - 卡住 - javascript