由nodeJS中的值总和产生的NaN答案

【问题标题】：NaN resulting from sum of values in nodeJS由nodeJS中的值总和产生的NaN
【发布时间】：2020-09-21 17:53:49
【问题描述】：

我对 Javascript 还很陌生。但是我创建了一个接受输入的 HTML 代码，然后 NodeJS 在服务器上运行它来计算总和。我正确下载了两个模块。但我似乎仍然认为 Nan 是数字的总和。

代码对朋友来说似乎可以正常工作。我将他的JS代码复制粘贴到我的，仍然没有运气。

const express = require("express");

const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", function(req, res) {
      res.sendFile(__dirname + "/index.html");
});

app.post("/", function(req, res) {
      console.log(req.body);
      var num1, num2, total = 0;
      num1 = req.body.num1;
      num2 = req.body.num2;
      total = num1 + num2;
      console.log(total);
      res.send("The result of the calculation is " + total);
});

app.listen(3000, function() {
     console.log("The server is running on port 3000.");
});

HTML

<form action="/" method="POST">
    <input type="text " name="num1 " placeholder="First Number " />
    <input type="text " name="num2 " placeholder="Second Number " />
    <button type="submit " name="submit ">Calculate</button>
</form>

【问题讨论】：

尝试console.log(num1, num2, total); 看看 num1 和 num2 是什么，然后再求和
console.log(req.body); 说什么？注意 - name="num1 " 为什么 name 属性有尾随空格？

标签： javascript html node.js server nan

【解决方案1】：

从名称中删除空格，使用类型号，您也可以使用 parseInt

`<form action="/" method="POST">
    <input type="number" name="num1" placeholder="First Number " />
    <input type="number" name="num2" placeholder="Second Number " />
    <button type="submit " name="submit ">Calculate</button>
</form>

const express = require("express");

const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", function(req, res) {
      res.sendFile(__dirname + "/index.html");
});

app.post("/", function(req, res) {

      var num1, num2, total = 0;
      consol.log(req.body.num2)
      num1 = parseInt(req.body.num1);a
      num2 = parseInt(req.body.num2);
      total = num1 + num2;
      res.send("The result of the calculation is " + total);
});

app.listen(3000, function() {
     console.log("The server is running on port 3000.");
});`

【讨论】：

【解决方案2】：

删除name 属性中的尾随空格，如果您要传递数字，为什么不将type 设置为number

其中一个值或两者都作为undefined 传递，因此您得到NaN

【讨论】：

【解决方案3】：

2 个错误：

您在名称中添加了空格
您使用文本而不是数字

这是一个正确的代码：

<form action="http://localhost:3000/" method="POST">
    <input type="number" name="num1" placeholder="First Number" />
    <input type="number" name="num2" placeholder="Second Number" />
    <button type="submit" name="submit">Calculate</button>
</form>


const express = require("express");

const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", function(req, res) {
      res.sendFile(__dirname + "/index.html");
});

app.post("/", function(req, res) {
      console.log(req.body);
      var num1, num2, total = 0;
      num1 = +req.body.num1;
      num2 = +req.body.num2;
      total = num1 + num2;
      console.log(total);
      res.send("The result of the calculation is " + total);
});

app.listen(3000, function() {
     console.log("The server is running on port 3000.");
});

【讨论】：