JavaScript函數不從HTML文本區域檢索字符串

Question

我正在學習JavaScript，我不理解爲什麼我的郵件沒有被字數統計功能檢索到。當我用多個單詞的消息單擊按鈕時，我收到'1'作爲單詞計數，這是不正確的。我已經測試了使用console.log（calWords（some message））時能夠正確工作的calWords函數。 此代碼是使用要求編寫的，我不能使用.split（）或正則表達式。這裏是一個鏈接代碼： https://jsbin.com/rucicol/edit?html,js,console,output

<form class="userform"> 
    <label id="labeltxt">Enter a Message to Display Statistics</label><br> 
    <textarea type="text" name="message" id='userInput'></textarea><br> 
    <button type="button" onclick="showStats()">Submit</button> 
</form> 


// global variables 
var numWords = 0; 
var displayStats = document.getElementById('userInput').value; 

// display stats 
function showStats() { 

    alert(calWords(displayStats)); 
} 


// calculate words 
function calWords(str) { 

    for(var i = 0; i < str.length; i++) { 
    if (str[i] === ' ') { 
     numWords ++; 
    } 
    } 
    return numWords + 1; 
} 

Answer 1

這是因爲，當你創建displayStats你把在創建（例如沒有）的時刻textarea的價值。

爲了使您的腳本正常工作，您可以在displayStats中「存儲」對textarea的引用，並在需要時訪問他的value。

這是修正後的腳本：

// global variables 
var numWords = 0; 
var displayStats = document.getElementById('userInput'); 

// display stats 
function showStats() 
    alert(calWords(displayStats.value)); 
} 


// calculate words 
function calWords(str) { 
    for(var i = 0; i < str.length; i++) { 
    if (str[i] === ' ') { 
     numWords ++; 
    } 
    } 
    return numWords + 1; 
} 

Answer 2

添加代碼即可獲得該函數中的文本區域中的內容。

// global variables 
var numWords = 0; 


// display stats 
function showStats() { 
    var displayStats = document.getElementById('userInput').value; 
    alert(calWords(displayStats)); 
} 


// calculate words 
function calWords(str) { 

    for(var i = 0; i < str.length; i++) { 
    if (str[i] === ' ') { 
     numWords ++; 
    } 
    } 
    return numWords + 1; 
} 

Answer 3

原因是您初始化了全局的displayStats，當負載發生時，頁面會被初始化。如果您在點擊處理程序中移動displayStats會更好。

此外，如果你有興趣知道textarea中單詞的數量，你應該將numWords移動到calWords以內，這樣你將得到textarea中存在的單詞數量。

// display stats 
 
function showStats() { 
 
    var displayStats = document.getElementById('userInput').value; 
 
    alert(calWords(displayStats)); 
 
} 
 

 
// calculate words 
 
function calWords(str) { 
 
    var numWords = 0; 
 
    for(var i = 0; i < str.length; i++) { 
 
    if (str[i] === ' ') { 
 
     numWords ++; 
 
    } 
 
    } 
 
    return numWords + 1; 
 
}

<form class="userform"> 
 
    <label id="labeltxt">Enter a Message to Display Statistics</label><br> 
 
    <textarea type="text" name="message" id='userInput'></textarea><br> 
 
    <button type="button" onclick="showStats()">Submit</button> 
 
</form>