Question

我在JavaScript上还很陌生，我真的无法充分发挥它的作用。我有一个接受2个数字的表格，并运行一个应该将2个数字相加并显示它们的函数的按钮，但是它仅将它们显示为纯文本（例如，我提交5和23时，它将显示为“ 523” “）。

<html>

  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
  </head>

  <body>
    <form>
      <label for="num1">First number:</label>
      <input type="number" id="num1" name="num2">
      <br>
      <label for="num2">Second number:</label>
      <input type="number" id="num2" name="num2">
      <button type="button" class="btn" onclick="addNums()">Calculate</button>
    </form>
  </body>
  <script src="main.js"></script>
</html>

JS：

function addNums()
{
    let num1 = document.querySelector("#num1").value;
    let num2 = document.querySelector("#num2").value;
    document.write(num1 + num2);
}

Answer 1

它将num1和num2变量串联为字符串。您需要使用Number之类的将其转换为数字，如下所示：

let num1 = Number(document.querySelector("#num1").value);
let num2 = Number(document.querySelector("#num2").value);
document.write(num1 + num2);

Answer 2

num1和num2的值是字符串类型，并且+符号将这些值串联起来而不是相加，可以通过使用parseInt函数强制转换这些值来解决问题。

这是一个example

Answer 3

function addNums()
{
    let num1 = parseInt(document.querySelector("#num1").value);
    let num2 = parseInt(document.querySelector("#num2").value);
    document.write(num1 + num2);
}

<html>

  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
  </head>

  <body>
    <form>
      <label for="num1">First number:</label>
      <input type="number" id="num1" name="num2">
      <br>
      <label for="num2">Second number:</label>
      <input type="number" id="num2" name="num2">
      <button type="button" class="btn" onclick="addNums()">Calculate</button>
    </form>
  </body>
  <script src="main.js"></script>
</html>

您应将string转换为int。

Answer 4

将功能更改为：

function addNums() {
  let num1 = document.querySelector("#num1").value;
  let num2 = document.querySelector("#num2").value;
  document.write(+num1 + +num2);
}

此外，如果您打算通过表单发布它，请将您的第一个输入名称num2更改为num1。

如何从“表格”中提取2个数字并将其相加，以便输出结果

4 个答案: