在 JavaScript 中；尝试循环将用户输入名称添加到名称列表中[重复]

Question

每次用户提交新名称时，我都会尝试更新并显示名称列表。例如（第一次：显示“Jim”，第二次：显示“Jim Bob”，第三次：显示“Jim Bob Joe”等）需要使用闭包。我可以得到pre-加载了输入值，但我想我的循环有问题，我没有得到任何进一步的输入。有什么想法吗？

输入一个名字，我会将其添加到列表中：

        <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

你已经接近了。

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;}
})();

在上面，返回的函数对外部执行上下文中的变量有一个闭包，包括text，但是text的值没有被修改，所以返回每次相同的值（这是函数第一次运行时分配的值）。

你要做的是更新text的值，然后返回（注意text不是必须的，你可以更新names em> 并使用 join 返回一个字符串）：

  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);
}

Answer 2

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

您可以在闭包中使用名称数组，使其不是全局的，并在其中添加您的点击侦听器，该侦听器可以将名称添加到数组并打印它们。

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

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

我更改了代码返回文本。请检查这个工作。