javascript - 在 javascript 待办事项应用程序中制作计数器

Question

我制作了一个小小的 javascript 待办事项应用程序，以便更好地掌握这门语言。我试图创建一个计数器，每次将任务添加到有序列表时该计数器都会递增，但它不起作用。这是我的代码:

var button = document.getElementById('add-button');

button.addEventListener('click', function() {
  var item = document.getElementById('input').value;
  var text = document.createTextNode(item);
  var newItem = document.createElement('li');
  newItem.appendChild(text);
  document.getElementById('todoList').appendChild(newItem);
  var count = 0;
  count++;
  document.getElementById('counter').innerHTML = count;


  var removeTask = document.createElement('img');
  removeTask.setAttribute('src', '/images/trash.jpg');
  removeTask.setAttribute('id', 'trash');
  removeTask.addEventListener('click', function() {
    newItem.parentNode.removeChild(newItem);
  });
  newItem.appendChild(removeTask);

});

<div class="header">
  <form>
    <h2>Todo App</h2>
    <p>Add a new todo</p>
    <input type="text" id="input" placeholder="Enter an activity......">
    <button type="button" id="add-button">Add Task</button>
  </form>
</div>
<ol id="todoList">
  <h1>Things to do:</h1>
  <div id="counter">0</div>
</ol>

现在，点击一下它就会增加到 1，但到此为止。我尝试创建一个 for 循环，循环直到 newItem 的长度，但这根本不起作用。如何使其在每次添加项目时递增？

Answer 1

您需要在事件监听器范围之外定义 count，否则每次添加的项目都会将 0 加 1(并且 0+1 始终为 1)。将声明放在监听器之外，并增加该值:

var button = document.getElementById('add-button');
var count = 0;


button.addEventListener('click', function() {
  var item = document.getElementById('input').value;
  var text = document.createTextNode(item);
  var newItem = document.createElement('li');
  newItem.appendChild(text);
  document.getElementById('todoList').appendChild(newItem);
  count++;
  document.getElementById('counter').innerHTML = count;


  var removeTask = document.createElement('img');
  removeTask.setAttribute('src', '/images/trash.jpg');
  removeTask.setAttribute('id', 'trash');
  removeTask.addEventListener('click', function() {
    newItem.parentNode.removeChild(newItem);
  });
  newItem.appendChild(removeTask);

});

<div class="header">
  <form>
    <h2>Todo App</h2>
    <p>Add a new todo</p>
    <input type="text" id="input" placeholder="Enter an activity......">
    <button type="button" id="add-button">Add Task</button>
  </form>
</div>
<ol id="todoList">
  <h1>Things to do:</h1>
  <div id="counter">0</div>
</ol>