Question

我正在尝试在html和javascript上制作一个简单的计算器，但是当我输入2个数字时，结果只是NaN。我正在使用谷歌浏览器。我现在认为这可能是我的HTML代码的问题。我只是想要使用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

我几乎可以保证inputs中的一个只返回一个未定义的值，只是因为提醒了什么。让我们测试一下这些情况（让我们假设您输入了两个5）：

“5”+“5”=“55”
null +“5”=“null5”
undefined +“5”= NaN

因此，您加在一起的其中一个数字是undefined

Answer 3

您是否可以为输入元素指定'num1'，'num2'和'operation'作为 name 而不是 id ？请记住，您使用的是 getElementById 。下面的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>

此外，您可以在JS中安全地使用parseFloat。无论如何，所有数字变量都在JS中浮动。 int和float没有区别。

JavaScript计算器NaN

3 个答案: