使用 JavaScript 在计算器项目中按“等于”时解决“NaN”结果

问题描述 投票：0回答：1

我一直在尝试为简单的计算器编写一个简单的代码并尝试使其正常运行，当我按下“等于”按钮时，结果为“Nan”。 虽然将 'String' 转换为 'Number' ，但仍然会发生这种情况，我无法解决！ 这是代码：

我使用 forEach 尝试了这个小项目，并将值更改为“文本内容”和其他内容。 这是源代码：

const screen = document.getElementById("display");
const buttons = document.querySelectorAll(".button");
const equalButton = document.getElementById("equal");
const addButton = document.querySelector(".add");
const clearButton = document.querySelector(".clear_btn");
buttons.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    if (screen.textContent === "") {
      screen.textContent = e.target.textContent;
    } else {
      screen.textContent += e.target.textContent;
    }
  });
});
let lastOp = "+";
let memory = 0;
clearButton.addEventListener("click", (e) => {
  if (screen.textContent != "") {
    screen.textContent = "";
  }
});
addButton.addEventListener("click", (e) => {
  lastOp = "+";
  memory = Number(screen.textContent);
  screen.textContent = "";
});
equalButton.addEventListener("click", (e) => {
  if (lastOp === "+") {
    let number = Number(screen.textContent);
    screen.textContent = Number(memory + number);
  }
});


 <body>
    <section>
      <div class="container">
        <div id="display"></div>
        <div class="buttons"></div>
      </div>
    </section>

    <div class="buttons">
      <button class="button clear_btn">C</button>
      <button class="button">/</button>
      <button class="button">*</button>
      <button class="button">&larr;</button>
      <button class="button">7</button>
      <button class="button">8</button>
      <button class="button">9</button>
      <button class="button">-</button>
      <button class="button">4</button>
      <button class="button">5</button>
      <button class="button">6</button>
      <button class="button add">+</button>
      <button class="button">1</button>
      <button class="button">2</button>
      <button class="button">3</button>
      <button class="button">.</button>
      <button class="button">(</button>
      <button class="button">0</button>
      <button class="button">)</button>
      <button id="equal" class="button">=</button>
    </div>
    <script src="script.js"></script>
  </body>
javascript nan
1个回答
0
投票

您面临的结果是“NaN”的问题是由于以下几个原因：

  1. 在 

    screen.textContent = Number(memory + number);
    行中，您尝试添加 
    memory
    和 
    number
    ，然后使用 
    Number()
    将结果转换为数字。但是，这不会按预期工作，因为 
    memory
    和 
    number
    已经是数字，将它们加在一起不会产生需要转换为数字的字符串。相反，您应该简单地删除 
    Number()
    转换，如下所示：
    screen.textContent = memory + number;
    .

  2. 此外，您不会在代码中处理其他数学运算，例如减法、乘法和除法。您仅使用 

    addButton
    事件侦听器实现了加法操作。为了支持其他操作，您需要为各个按钮添加事件侦听器并实现执行这些操作的逻辑，类似于您对添加操作所做的操作。

这是您的代码的更新版本，修复了“NaN”问题并包括对加法、减法、乘法和除法的基本支持：

const screen = document.getElementById("display");
const buttons = document.querySelectorAll(".button");
const equalButton = document.getElementById("equal");
const addButton = document.querySelector(".add");
const subtractButton = document.querySelector(".subtract");
const multiplyButton = document.querySelector(".multiply");
const divideButton = document.querySelector(".divide");
const clearButton = document.querySelector(".clear_btn");

buttons.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    if (screen.textContent === "") {
      screen.textContent = e.target.textContent;
    } else {
      screen.textContent += e.target.textContent;
    }
  });
});

let lastOp = "+";
let memory = 0;

clearButton.addEventListener("click", (e) => {
  if (screen.textContent != "") {
    screen.textContent = "";
  }
});

addButton.addEventListener("click", (e) => {
  lastOp = "+";
  memory = Number(screen.textContent);
  screen.textContent = "";
});

subtractButton.addEventListener("click", (e) => {
  lastOp = "-";
  memory = Number(screen.textContent);
  screen.textContent = "";
});

multiplyButton.addEventListener("click", (e) => {
  lastOp = "*";
  memory = Number(screen.textContent);
  screen.textContent = "";
});

divideButton.addEventListener("click", (e) => {
  lastOp = "/";
  memory = Number(screen.textContent);
  screen.textContent = "";
});

equalButton.addEventListener("click", (e) => {
  if (lastOp === "+") {
    let number = Number(screen.textContent);
    screen.textContent = memory + number;
  } else if (lastOp === "-") {
    let number = Number(screen.textContent);
    screen.textContent = memory - number;
  } else if (lastOp === "*") {
    let number = Number(screen.textContent);
    screen.textContent = memory * number;
  } else if (lastOp === "/") {
    let number = Number(screen.textContent);
    screen.textContent = memory / number;
  }
});

这是更新后的 HTML 代码：

<body>
  <section>
    <div class="container">
      <div id="display"></div>
      <div class="buttons"></div>
    </div>
  </section>

  <div class="buttons">
    <button class="button clear_btn">C</button>
    <button class="button divide">/</button>
    <button class="button multiply">*</button>
    <button class="button">&larr;</button>
    <button class="button">7</button>
    <button class="button">8</button>
    <button class="button">9</button>
    <
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.