Question

如何将此包装为Javascript闭包以使var entryString在addEventListener方法中工作

JSFiddle：http://jsfiddle.net/kboucheron/XVq3n/11/

    addButton = document.getElementById('addButton');
    var entryString = '';

addButton.addEventListener("click", function(e) {
    text = document.getElementById('listItem').value;
    var addItem = document.getElementById('output');
    entryString += '<li>';
    entryString += text;
    entryString += '</li>';
    var entry = '';
    entry.innerHTML = entryString; 
    addItem.appenChild(document.createTextNode(entry));
});

Answer 1

var addButton = document.getElementById('addButton');

addButton.addEventListener("click", function(e) {
    var text = document.getElementById('listItem').value;
    var addItem = document.getElementById('output');
    var entry = document.createElement("li");
    entry.innerHTML = text; 
    addItem.appendChild(entry);
});

JS小提琴： http://jsfiddle.net/XVq3n/13/

Answer 2

你已经有了一个“闭包”，因为你有一个封闭的功能块，你可以在其中声明entryString的范围。只需在函数声明下方添加var entryString即可。但是这里有很多其他的错误。您还尝试分配字符串的innerHTML，然后附加该字符串。我会按如下方式重构你的函数：

addButton.addEventListener("click", function(e) {
  // create a new <li>
  var li = document.createElement('li');
  // take the text from #listItem and put it into the li
  li.appendChild(document.createTextNode(document.getElementById('listItem').value));
  // append the new <li> to #output
  document.getElementById('output').appendChild(li);
});

将其变为Javascript闭包

2 个答案: