JavaScript 在页面上给出 NaN 错误，但变量实际上是一个数字

【问题标题】：JavaScript gives NaN error on the page but variable is actually a numberJavaScript 在页面上给出 NaN 错误，但变量实际上是一个数字
【发布时间】：2021-08-18 19:42:30
【问题描述】：

我正在尝试用 JS 制作一个基本的计算器。它正在为第一步工作。我的意思是它计算 1+3 = 4 但它不能计算 4+2 例如。实际上它在控制台上计算它但我不能在网页上显示它，所以 DOM。那么您知道为什么会这样吗？

const operations = {
    '+': (a, b) => a + b,
    '-': (a, b) => a - b,
    '*': (a, b) => a * b,
    '/': (a, b) => a / b
}

const doOpr = function (sign) {
    labelUser.value += `${sign}`

    // const deleteFn = function () {
    //     labelUser.value = labelUser.value.slice(0, labelUser.value.length - 1)
    // }
    // btnDelete.addEventListener('click', deleteFn)

    const equalFn = function (sign) {
        let numbers = labelUser.value.split(`${sign}`)
        //console.log(numbers)
        const operation = operations[`${sign}`]
        let result = operation(+numbers[0], +numbers[1])
        labelUser.value = result

        //console.log(typeof result, numbers) //This line proves that result is a number. Not a NaN. 
        //Also it proves numbers array contains only two elements.

        return
    }
    btnEqual.addEventListener('click', equalFn.bind(null, sign))
}

btnPlus.addEventListener('click', doOpr.bind(null, '+'))

btnExtr.addEventListener('click', doOpr.bind(null, '-'))


const btnPlus = document.querySelector('.btn-plus')
const btnExtr = document.querySelector('.btn-extr')
const btnEqual = document.querySelector('.btn-equal')
const btnDelete = document.querySelector('.btn-delete')
const labelUser = document.querySelector('.user__input')
const form = document.querySelector('.user__form')

form.reset()
const operations = {
    '+': (a, b) => a + b,
    '-': (a, b) => a - b,
    '*': (a, b) => a * b,
    '/': (a, b) => a / b
}

const doOpr = function (sign) {
    labelUser.value += `${sign}`

    // const deleteFn = function () {
    //     labelUser.value = labelUser.value.slice(0, labelUser.value.length - 1)
    // }
    // btnDelete.addEventListener('click', deleteFn)

    const equalFn = function (sign) {
        let numbers = labelUser.value.split(`${sign}`)
        const operation = operations[`${sign}`]
        let result = operation(+numbers[0], +numbers[1])
        labelUser.value = result
        console.log(typeof result, numbers)
        return
    }
    btnEqual.addEventListener('click', equalFn.bind(null, sign))
}

btnPlus.addEventListener('click', doOpr.bind(null, '+'))

btnExtr.addEventListener('click', doOpr.bind(null, '-'))
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 85%;
  background-color: olive;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.user__form {
  grid-row: 1/3;
  grid-column: 1/-1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user__input {
  width: 90%;
  height: 80%;
  font-size: 6rem;
  text-align: right;
  padding: 0 3rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Calculator</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="container">
        <form class="user__form">
            <input type="text" class="user__input" placeholder="Entry num">
        </form>

        <button class="btn-plus">
            addition
        </button>

        <button class="btn-extr">
            extraction
        </button>

        <button class="btn-equal">
            equal
        </button>

        <button class="btn-delete">
            delete
        </button>

    </div>
    <script src="./script.js"></script>
</body>

</html>

在这里你可以看到，我先输入了2+1，它计算并显示它，然后我再次尝试相同的操作，它计算但不能显示在页面上。

【问题讨论】：

  • 请提供一个可运行的minimal reproducible example 来演示该问题
  • 好吧，伙计们。这是缺点。
  • 伙计们，你能找到什么吗？或者我应该重新发布这个问题吗？

标签： javascript calculator nan


【解决方案1】：

现在的问题是，如果你：

  1. 输入“2”。
  2. 按“添加”按钮。
  3. 输入“3”。
  4. 按“等于”按钮。
  5. 按“添加”按钮。
  6. 键入“4”。
  7. 按“等于”按钮。

第 2 步将向等号按钮添加一个事件侦听器，并在单击时（第 4 步）执行添加逻辑。但是，听众仍然存在。在第 5 步，添加了另一个侦听器。在第 7 步，两个事件侦听器触发：第一个将执行加法 (5 + 4 = 9)，第二个将尝试通过拆分 + 并将两个值相加来再次执行加法。但是，该值已经只是“9”，所以这会导致一个问题，因为没有两个操作数：

const operations = {
    '+': (a, b) => a + b,
}

const value = "9";

const numbers = value.split("+");
const a = +numbers[0];
const b = +numbers[1];

console.log(numbers, a, b);

console.log(operations["+"](a, b))

由于问题是多个事件侦听器，您可以创建一个在触发后自毁的事件侦听器：

const btnPlus = document.querySelector('.btn-plus')
const btnExtr = document.querySelector('.btn-extr')
const btnEqual = document.querySelector('.btn-equal')
const btnDelete = document.querySelector('.btn-delete')
const labelUser = document.querySelector('.user__input')
const form = document.querySelector('.user__form')

form.reset()
const operations = {
    '+': (a, b) => a + b,
    '-': (a, b) => a - b,
    '*': (a, b) => a * b,
    '/': (a, b) => a / b
}

const doOpr = function (sign) {
    labelUser.value += `${sign}`

    const equalFn = function(sign) { //equalFN should return a function 
      return function equal() { //give the function a name --+
        let numbers = labelUser.value.split(`${sign}`) //    |
        const operation = operations[`${sign}`] //           |
        let result = operation(+numbers[0], +numbers[1]) //  |
        console.log(typeof result, result, numbers) //       |
        labelUser.value = result //                          |
        btnEqual.removeEventListener("click", equal); //<----+ use the name to remove it
        return
      }
    }
    btnEqual.addEventListener('click', equalFn(sign))
}


btnPlus.addEventListener('click', doOpr.bind(null, '+'))

btnExtr.addEventListener('click', doOpr.bind(null, '-'))
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 85%;
  background-color: olive;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.user__form {
  grid-row: 1/3;
  grid-column: 1/-1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user__input {
  width: 90%;
  height: 80%;
  font-size: 6rem;
  text-align: right;
  padding: 0 3rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Calculator</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="container">
        <form class="user__form">
            <input type="text" class="user__input" placeholder="Entry num">
        </form>

        <button class="btn-plus">
            addition
        </button>

        <button class="btn-extr">
            extraction
        </button>

        <button class="btn-equal">
            equal
        </button>

        <button class="btn-delete">
            delete
        </button>

    </div>
    <script src="./script.js"></script>
</body>

</html>

但是，使用一次性事件侦听器通常不是一个好主意。这意味着正确的操作取决于动作的顺序。事实上，目前还不能输入“2+3”来计算，你必须按下“addition”按钮来注册additiion handler。

相反，这可以解耦。如果您只期望一个运算符，然后进行非常小的修改，您可以让 equals 处理程序只检查operations 中定义的操作数。如果你有，然后使用正常的逻辑来拆分和处理输入。

这使您可以将等式运算分开，而不是在评估结果之前依赖单击“加法”或“减法”。因此，这两个按钮变得非常简单，只需在输入字段中添加一个“+”或“-”。但是，仅使用键盘键入“2+3”的用户也可以，并将被评估为 5。

const btnPlus = document.querySelector('.btn-plus')
const btnExtr = document.querySelector('.btn-extr')
const btnEqual = document.querySelector('.btn-equal')
const btnDelete = document.querySelector('.btn-delete')
const labelUser = document.querySelector('.user__input')
const form = document.querySelector('.user__form')

form.reset()
const operations = {
    '+': (a, b) => a + b,
    '-': (a, b) => a - b,
    '*': (a, b) => a * b,
    '/': (a, b) => a / b
}

const doOpr = function (sign) {
    labelUser.value += `${sign}`
}

//extract equalFn as a separate handler
const equalFn = function () {
    let sign;
    //search the user input for any supported operation
    //and set the sign to that operation
    for (const op of Object.keys(operations)) {
      if (labelUser.value.includes(op)) {
          sign = op;
          break;
        }
    }
    if (sign === undefined)
      return; //cannot be calculated
    
    //use the previous logic to split the input and process it
    let numbers = labelUser.value.split(sign)
    const operation = operations[sign]
    let result = operation(+numbers[0], +numbers[1])
    console.log(typeof result, result, numbers)
    labelUser.value = result
    return
}

btnPlus.addEventListener('click', doOpr.bind(null, '+'))
btnExtr.addEventListener('click', doOpr.bind(null, '-'))

//only add equalFn a single time as a handler
btnEqual.addEventListener('click', equalFn)
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 85%;
  background-color: olive;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.user__form {
  grid-row: 1/3;
  grid-column: 1/-1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user__input {
  width: 90%;
  height: 80%;
  font-size: 6rem;
  text-align: right;
  padding: 0 3rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Calculator</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="container">
        <form class="user__form">
            <input type="text" class="user__input" placeholder="Entry num">
        </form>

        <button class="btn-plus">
            addition
        </button>

        <button class="btn-extr">
            extraction
        </button>

        <button class="btn-equal">
            equal
        </button>

        <button class="btn-delete">
            delete
        </button>

    </div>
    <script src="./script.js"></script>
</body>

</html>

【讨论】：

  • 非常感谢。这是一个非常聪明的解决方案。但我猜它无法计算提取。
  • 呃，我找到了。您只是错过了 for 循环中第一个 if 的花括号 :) 再次感谢您 :)
  • 哦，我的括号不好。我已经添加了它们。感谢您发现这一点。
猜你喜欢
  • 2021-04-26
  • 2020-12-21
  • 2023-03-12
  • 2023-04-02
  • 2013-06-15
  • 2012-07-30
  • 1970-01-01
  • 2021-07-18
  • 2017-11-15
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode