JavaScript計算器NaN

我想在html和javascript上做一個簡單的計算器，但是當輸入2個數字時，結果就是NaN。我正在使用谷歌瀏覽器。我現在認爲這可能是我的HTML代碼有問題。我只是開始使用HTML和JavaScript，所以請簡單回答一下。JavaScript計算器NaN

<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>

來源

2014-02-23 user3343997

var num1 = Number（（document.getElementById（'num1'）。value））; var num2 = Number（（document.getElementById（'num2'）。value））;.嘗試這個。您只是在添加的情況下解析數字 – Triode

您能發佈一個完整的代碼示例，包括您的HTML嗎？ – j08691

因爲.value返回一個字符串，而不是一個數字.. –

有沒有可能是你給‘NUM1’，‘NUM2’和‘操作’作爲名爲輸入元素而不是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在很多情況下。無論如何，所有數字變量都是浮動的。 int和float沒有區別。

來源

2014-02-23 18:45:46 Teddy

嘗試使用parseInt(num1)功能，

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

來源

2014-02-23 18:30:36

如果數字爲0.3，該怎麼辦？ –

@LuckySoni - parseFloat :-)（我編輯了答案） – stevenvh

我幾乎可以保證你的inputs之一返回一個未定義的值僅僅是因爲什麼驚動。讓我們測試這些情況下（讓我們假設你輸入了兩個5S）：

「5」 + 「5」= 「55」
空+ 「5」= 「null5」
未定義+「5 「= NaN的

因此，要添加在一起號碼之一是undefined

來源

2014-02-23 18:36:44 Phil

JavaScript計算器NaN

回答

相關問題