JavaScript计算器NaN_Javascript - Fatal编程技术网

JavaScript计算器NaN

javascript

JavaScript计算器NaN,javascript,Javascript,我试图在html和javascript上制作一个简单的计算器，但当我输入2个数字时，结果就是NaN。我正在使用谷歌浏览器。我现在认为这可能是我的HTML代码的问题。我只是想使用HTML和JavaScript，所以这个词的答案很简单 <script language="JavaScript"> function workOut() { var num1 = (document.getElementById('num1').value) var num2 = (document.

我试图在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>

尝试使用parseIntnum1函数

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

我几乎可以向您保证，其中一个输入返回的是未定义的值，这仅仅是因为发出了警报。让我们测试这些案例假设您输入了两个5s：

5 + 5 = 55 空+5=空5 未定义+5=NaN

因此，您要加在一起的数字中有一个是未定义的

您是否可能将“num1”、“num2”和“operation”作为输入元素的名称而不是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没有区别

var num1=Numberdocument.getElementById'num1'。值；var num2=Numberdocument.getElementById'num2'.value；。试试这个。你只能在添加时解析数字。你可以发布一个完整的代码示例，包括你的HTML吗？因为.value返回一个字符串而不是一个数字。@LuckySoni 5+5=55 not NaN…@Phil感谢复习：如果数字是0.3怎么办？