尝试创建基本计算器时出现 NaN 错误

Question

我学习 Javascript 已经 3 天了，我真的很高兴能更多地了解这门语言，在我开始之前，我已经完成了基础 HTML 和 CSS 教育。我目前正在瑞典的一所大学学习 2 年课程。

我正在尝试创建一个非常基本的计算器，目前只能将 2 个数字相加。我有一个盒子，还有一个盒子。我想让每个框中的每个数字都显示为第三个也是最后一个框中的 box1、box2 的总和。

此时我在尝试添加 2+3 时在第 3 个框中得到 "NaN"。

正如我所说，我真的很新，我很感激我能得到的所有帮助，请注意，我不是来这里让任何人做我的作业的，我们有很多作业，我真的很想学习和理解语言，因为我想在我完成学业后使用它。

干杯！

<h1>Addera två tal med varandra</h1>

<form>
  <input type="text" value="0" id="tal1" /> <br>
  <input type="text" value="0" id="tal2" /> <br>
  <input type="button" value="Beräkna" onClick="kalkylera();" />
  
  <p>Den totala summan är</p>
  <input type="text" value="0" id="svar" />
</form>

<script>
  function kalkylera() {

    //Get the two numbers entered in the box
    var ForstaTalet = document.getElementById("tal1").value;
    var AndraTalet = document.getElementById("tal2").value;

    //Count the two entered numbers together
    var svar = tal1 + tal2;

    //Show result
    document.getElementById("svar").value = svar;

  }
</script>

PS，我不确定为什么在将它添加到 codepen 时在计算器底部写了“//# sourceURL=pen.js”，这不是它的样子在 chrome.

中查看时

提前致谢。

Answer 1

您需要使用 parseFloat 将您的值转换为 float 并使用 right 变量，如下例所示：

//Get the two numbers entered in the box
var ForstaTalet = parseFloat(document.getElementById("tal1").value);
var AndraTalet = parseFloat(document.getElementById("tal2").value);

//Count the two entered numbers together
var svar = ForstaTalet + AndraTalet;

//Show result
document.getElementById("svar").value = svar;

Answer 2

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Calculator</title>
</head>
<body>
    <form>
    <input type="text" placeholder='num1' id="tal1"/> <br>
    <input type="text" placeholder='num2' id="tal2"/> <br>
    <input type="button" value="Add" onClick="sum()"/>
    <input type="text" placeholder='sum' id="svar"/>
    </form>
    <script>
        function sum()
        {
            var ForstaTalet = parseFloat(document.getElementById("tal1").value);
            var AndraTalet = parseFloat(document.getElementById("tal2").value);
            var svar = ForstaTalet + AndraTalet;
            document.getElementById("svar").value = svar;
        }
    </script>
</body>
</html>

这很好用。

尝试创建基本计算器时出现 NaN 错误

I get NaN error when trying to create a basic calculator

javascript

math

function

calculator