JavaScript计算器NaN

Question

I am trying to make a simple calculator on html and javascript, but when I enter 2 numbers, the result is just NaN. 我正在尝试在html和javascript上制作一个简单的计算器，但是当我输入2个数字时，结果仅为NaN。 I am using google chrome. 我正在使用谷歌浏览器。 I now think that it may be a problem with my HTML code. 我现在认为我的HTML代码可能有问题。 I am only just strting to use HTML and JavaScript, so word answers simply please. 我只是想使用HTML和JavaScript，所以请简单回答单词。

<script language="JavaScript">
function workOut()  {
var num1 = (document.getElementById('num1').value)
var num2 = (document.getElementById('num2').value)

if(document.getElementById('operation').value=="plus") 
{
    var answer= Number(num1) + Number(num2);
    alert(answer);
}
if(document.getElementById('operation').value=="minus") 
{
    var answer= num1 - num2;
    alert(answer);
}
if(document.getElementById('operation').value=="multiply") 
{
    var answer= num1 * num2;
    alert(answer);
}
if(document.getElementById('operation').value=="divide") 
{
    var answer= num1 / num2;
    alert(answer);
}
}
</script>

</head>
<body>
<h1>Calculator</h1>

<form name="calculatordata">
<table width="50%" border="1px dashed">
<tr>
        <td id="num1">Number 1</td>
        <td><input type="number" name="number1" /></td>
    </tr>
<tr>
        <select id="operation">
        <option value="plus">+</option>
        <option value="minus">-</option>
        <option value="multiply">x</option>
        <option value="divide">/</option>
    </tr>
<tr>
        <td id="num2">Number 2</td>
        <td><input type="number" name="number2" /></td>
    </tr>
<tr>
        <td><input type="submit" name="Submit" value="Submit" onClick="return          workOut();"/></td>
        <td><input type="reset" name="Reset" value="Reset" /></td>
    </tr>
</table>
</form>

Answer 1

尝试使用parseInt(num1)函数，

var answer= parseInt(num1) + parseInt(num2);

Answer 2

I can almost guarantee you that one of the inputs is returning an undefined value only because of what is alerted. 我几乎可以保证您，其中一个inputs仅由于发出警报而返回未定义的值。 Let's test these cases ( let us assumed you entered two 5s): 让我们测试这些情况（假设您输入了两个5）：

"5" + "5" = "55" “ 5” +“ 5” =“ 55”
null + "5" = "null5" null +“ 5” =“ null5”
undefined + "5" = NaN 未定义+“ 5” = NaN

Therefore, one of the numbers you're adding together is undefined 因此，您要相加的数字之一是undefined

Answer 3

Is it possible that you have given 'num1', 'num2' and 'operation' as name for the input elements and not id ? 您是否有可能将'num1'，'num2'和'operation'作为输入元素的名称而不是id ？ Remember you are using getElementById . 记住，您正在使用getElementById 。 The below html makes your function work fine. 下面的html使您的函数正常工作。

<form name='test'>
<input type='text' name='num1' id='num1'/>
<input type='text' name='num2' id='num2'/>
<input type='text' name='operation' id='operation'/>
<input type='button' value='Calc' onclick='workOut()'/>
</form>

Also, you can safely use parseFloat in many cases in JS. 此外，在很多情况下，您都可以在JS中安全地使用parseFloat。 All number variables are float in JS anyway. 无论如何，所有数字变量都在JS中浮动。 There is no differenciation of int and float. int和float没有区别。

JavaScript计算器NaN

问题描述

3 个解决方案

解决方案1
0 2014-02-23 18:30:36

解决方案2
0 2014-02-23 18:36:44

解决方案3
0 已采纳 2014-02-23 18:45:46

JavaScript计算器NaN

问题描述

3 个解决方案

解决方案1 0 2014-02-23 18:30:36

解决方案2 0 2014-02-23 18:36:44

解决方案3 0 已采纳 2014-02-23 18:45:46

解决方案1
0 2014-02-23 18:30:36

解决方案2
0 2014-02-23 18:36:44

解决方案3
0 已采纳 2014-02-23 18:45:46