时间戳

首页 > 解决方案 > 在 javascript 待办事项应用程序中制作计数器

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

问题描述

我制作了一个小 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，但它在那里结束。我尝试制作一个循环直到 newItem 的长度，但这根本不起作用。如何在每次添加项目时使其递增？

标签： javascriptevents

解决方案

您需要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>

推荐阅读