函數返回值'NaN'

我正在編寫一個代碼，用於檢查用戶輸入並根據結果給出結果。但是，這裏的轉折點在於，字符串還可以包含「打」字，這意味着十二個字。函數返回值'NaN'

HTML：

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
     <title>iRock</title> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" type="text/css" href="css.css"> 
    </head> 
    <body> 
     <form> 
      <label for="numDonut">Enter how many donuts you want: </label> 
      <input type="text" id="numDonut"> 
      <div id="totalDonuts"></div> 
      <div id="submit" onclick="callDonut();">SUBMIT</div> 
     </form> 
     <script type="text/javascript" src="javascript.js"></script> 
    </body> 
</html>

JS：東西會看下面的代碼後清算

//Get string number of donuts entered 
var numDonutString = document.getElementById('numDonut').value; 

function getTotalDonuts(donutString){ 
    var initialDonutCount = parseInt(donutString); 
    var finalDonuts = 0; 

    if(donutString.indexOf('dozen') != -1) 
     finalDonuts = initialDonutCount * 12; 
    else 
     finalDonuts = initialDonutCount; 

    return finalDonuts; 
} 
function callDonut(){ 
    document.getElementById('totalDonuts').textContent = getTotalDonuts(numDonutString); 
}

現在，這裏的問題是：無論我所付出的投入，即使不包含'打'字，函數返回NaN，這是沒有意義的。

可能是什麼問題？

來源

2015-10-28 codetalker

不能重現，似乎很好地工作。 – deceze

請發表您的意見。你確定輸入是一個數字嗎？ –

你認爲'parseInt'總是會返回一個數字 - 它不會。它會返回'NaN'，以防萬一它無法理解輸入並正確強制輸入。在調用'parseInt'之後執行'console.log（initialDonutCount）;並檢查你得到的結果。 – Mjh

您需要更改功能callDonut，如：

function callDonut(){ 
    document.getElementById('totalDonuts').textContent = getTotalDonuts(document.getElementById('numDonut').value); 
}

問題是：你不重新分配您輸入的新值的變量numDonutString

來源

2015-10-28 15:41:17 R3tep

這是工作... Thnx很多 – codetalker

你遇到的問題是你試圖預先定義你的var numDonutString = document.getElementById('numDonut').value;然而這是做了一個值的副本，它永遠不會更新該值。

因此，您需要做的是每次單擊SUBMIT按鈕時獲取新值。

的jsfiddle：https://jsfiddle.net/CanvasCode/xue6sbz2/

function getTotalDonuts(donutString){ 
    alert(donutString); 
    var initialDonutCount = parseInt(donutString); 
    var finalDonuts = 0; 

    if(donutString.indexOf('dozen') != -1) 
     finalDonuts = initialDonutCount * 12; 
    else 
     finalDonuts = initialDonutCount; 

    return finalDonuts; 
} 

function callDonut(){ 
    document.getElementById('totalDonuts').textContent = getTotalDonuts(document.getElementById('numDonut').value); 
}

來源

2015-10-28 15:41:02 Canvas

Thnx很多的解釋 – codetalker

歡迎:) – Canvas

問題出在callDonut函數和你正在獲得的文本框的價值只是在文件加載，所以該值始終爲NaN。

window.getTotalDonuts = function(donutString) { 
 
    var initialDonutCount = parseInt(donutString); 
 
    var finalDonuts = 0; 
 
    if (donutString.indexOf('dozen') != -1) { 
 
    finalDonuts = initialDonutCount * 12; 
 
    } else { 
 
    finalDonuts = initialDonutCount; 
 
    } 
 
    return finalDonuts || 0; 
 
} 
 

 
window.callDonut = function() { 
 
    //Get string number of donuts entered 
 
    var numDonutString = document.getElementById('numDonut').value; 
 
    document.getElementById('totalDonuts').textContent = getTotalDonuts(numDonutString); 
 
}

<form> 
 
    <label for="numDonut">Enter how many donuts you want:</label> 
 
    <input type="text" id="numDonut"> 
 
    <div id="totalDonuts"></div> 
 
    <div id="submit" onclick="callDonut();">SUBMIT</div> 
 
</form> 
 
</body>

DEMO

來源

2015-10-28 15:58:13

函數返回值'NaN'

回答

相關問題