在JavaScript中;試圖循環添加用戶輸入名稱到名稱列表

Question

我試圖更新並顯示每次用戶提交新名稱時的名稱列表。例如，第一次顯示「Jim」，第二次顯示「Jim Bob」，第三次顯示「Jim Bob Joe」等）。需要使用閉包，加載輸入值，但我想有什麼不對我的循環，我沒有得到任何進一步的輸入任何想法

輸入一個名字，我將它添加到列表中：？

 <input type="text" id="newName" value="Doug"/> 
     <button onclick="closureExample()">closureExample()</button>  
     <p id="nameList">Abe,Bill,Charlie</p> 
     <script> 
      var addName = (function() { 
       var names = ['Abe', 'Bill', 'Charlie']; 
       var name = document.getElementById("newName").value; 
       var text; 
       for (var i = 0; i < names.length; i++) { 
        text += names[i]; 
       } 
       return function() {return text;} 
      })(); 

      function closureExample(){     
       document.getElementById("nameList").innerHTML = addName();     
      } 
     </script> 

Answer 1

<input type="text" id="newName" value="Doug"/> 
<button onclick="closureExample()">closureExample()</button>  
<p id="nameList">Abe,Bill,Charlie</p> 
<script> 
    var addName = (function() { 
     var names = ['Abe', 'Bill', 'Charlie']; 
     var name = document.getElementById("newName").value; 
     var text; 
     for (var i = 0; i < names.length; i++) { 
      text += names[i]; 
     } 
     return text; 
    })(); 

    function closureExample(){     
     document.getElementById("nameList").innerHTML = addName();     
    } 
</script> 

我改了代碼返回文本請檢查這個工作

Answer 2

你可以在clos因此它不是全局的，並且可以在其中添加您的點擊監聽器，它可以向陣列添加名稱並將其打印出來。

<input type="text" id="newName" value="Doug"/> 
    <button id="add_name_btn">closureExample()</button>  
    <p id="nameList"></p> 
    <script> 
     (function(){ 
      var names = []; 
      document.getElementById("add_name_btn").addEventListener('click', function() { 
       names.push(document.getElementById("newName").value); 
       document.getElementById('nameList').innerHTML = names.join(' '); 
      }); 
     })(); 
    </script> 

Answer 3

<input type="text" id="newName" value="Doug"/> 
<button onclick="closureExample()">closureExample()</button>  
<p id="nameList">Abe,Bill,Charlie</p> 
<script> 
function closureExample(){ 
    var names = document.getElementById("nameList").innerHTML.split(','), 
     name = document.getElementById("newName").value; 
    names.push(name); 
    document.getElementById("nameList").innerHTML = names.toString();     
} 
</script> 

這裏是你一個JS提琴：http://jsfiddle.net/passtet/kche2sx9/

Answer 4

你靠近。

var addName = (function() { 
    var names = ['Abe', 'Bill', 'Charlie']; 
    var name = document.getElementById("newName").value; 
    var text; 
    for (var i = 0; i < names.length; i++) { 
    text += names[i]; 
    } 
    return function() {return text;} 
})(); 

在上文中，返回的函數具有一個封閉在外部執行上下文的變量，包括文本，文本不被修改所以每次返回相同的值的然而的值（其是函數第一次運行時分配的值）。

你想要做的就是更新文本的值，然後返回它（注意：文本是沒有必要的，你可以更新名來代替，而加入返回一個字符串）：

return function(newName) { 

    // Add the new name to text 
    text += newName; 

    // return a string of the concatenated names 
    return text; 

    /* 
    ** this could be done instead 
    // Update the names array 
    names.push(newName); 

    // Return the concatenated values in the names array 
    return names.join(', ') 
    */ 
    } 

當單擊該按鈕，通過新的名稱功能：

function closureExample() { 
    document.getElementById("nameList").innerHTML = addName(document.getElementById('newName').value); 
}