Question

因此，我一直在使用HTML，JS和CSS制作一个非常简单的ToDo列表，剩下的唯一一件事就是向用户显示有多少任务以及完成了多少任务。例如。如果有3个完成的任务和总共7个任务，则应输出3/7。我一直在尝试使用一些事件监听器和其他东西来执行此操作，但无法使其正常工作...如何使用HTML和JS中的ouput元素来执行此操作？

var button = document.getElementById('button')
var ul = document.getElementById('todo')
var output = document.getElementsByName('result')


button.addEventListener("click", addTask);
button.addEventListener("click", function(event) {
  event.preventDefault()
})

function addTask() {
  var checkbox = document.createElement("INPUT")
  checkbox.setAttribute("type", "checkbox");
  var label = document.createElement("LABEL");
  var li = document.createElement("LI");
  var task = document.createTextNode(document.getElementById('task').value);
  label.appendChild(task)
  li.appendChild(label)
  li.insertBefore(checkbox, li.childNodes[0])
  ul.appendChild(li)

  var date = new Date()
  tasks.push({
    text: document.getElementById('task').value,
    date: date
  })
}

var tasks = []
console.log(tasks)

#todo {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

input[type=checkbox]:checked + label {
  text-decoration: line-through;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
</head>

<body>

  <header>
    <h1>To-do list</h1>
  </header>

  <form class="" action="" method="">
    <input type="submit" name="button" value="Add task" id="button">
    <input type="text" name="input" id="task" autofocus>
    <output name="result"></output>
    <ul id="todo"></ul>
  </form>

  <script type="text/javascript" src="todo.js"></script>

</body>

</html>

Answer 1

此方法添加了两个元素以显示已完成的待办事项和总数。同样，将事件change绑定到每个新创建的复选框，以在用户单击它们时捕获它们。

var button = document.getElementById('button')
var ul = document.getElementById('todo')
var output = document.getElementsByName('result')
var total = document.getElementById('total')
var completed = document.getElementById('completed')

button.addEventListener("click", addTask);
button.addEventListener("click", function(event) {
  event.preventDefault();
});

function addTask() {
  var checkbox = document.createElement("INPUT");
  checkbox.setAttribute("type", "checkbox");
  
  // Add one more todo in total count.
  total.textContent = +total.textContent + 1;
  
  //Thrigger the completed event
  checkbox.addEventListener("change", function(event) {
    if (this.checked) completed.textContent = +completed.textContent + 1;
    else completed.textContent = +completed.textContent - 1;
  });
  
  var label = document.createElement("LABEL");
  var li = document.createElement("LI");
  var task = document.createTextNode(document.getElementById('task').value);
  label.appendChild(task)
  li.appendChild(label)
  li.insertBefore(checkbox, li.childNodes[0])
  ul.appendChild(li)

  var date = new Date()
  tasks.push({
    text: document.getElementById('task').value,
    date: date
  });
}

var tasks = []
console.log(tasks)

#todo {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

input[type=checkbox]:checked+label {
  text-decoration: line-through;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
</head>

<body>

  <header>
    <h1>To-do list</h1>
  </header>

  <form class="" action="" method="">
    <input type="submit" name="button" value="Add task" id="button">
    <input type="text" name="input" id="task" autofocus>
    <output name="result"></output>
    <p>My completed todos: <span id='completed'>0</span> / <span id='total'>0</span> </p>
    <ul id="todo"></ul>
  </form>

  <script type="text/javascript" src="todo.js"></script>

</body>

</html>

Answer 2

其不起作用的原因是因为您将其放入了表单中。仅当您要向运行网站的服务器提交POST或PUT请求时，才应使用表格。当按下“提交”按钮时，浏览器刷新页面，因为它向服务器发送了POST请求，并且响应了（很可能是404-未找到）。因此，首先，您必须删除表格。

第二，我强烈建议您使用jQuery而不是常规的DOM操作方法。它的速度更快，可扩展性更高，更不用说更易于读写了。这是一个带有代码的Plunker，我对其进行了一些改动以使其正常工作。您可以查看它here。

var tasks = []

var button = $('#button')
var ul = $('#todo')
var output = $('#result')

button.click(function() {
  addTask();
});

function addTask() {
  var li = $('<li/>');

  var checkbox = $('<input/>')
    .attr('type', 'checkbox');

  var taskText = $('#task').val();
  var label = $('<label/>')
    .html(taskText);

  li.append(checkbox);
  li.append(label);

  ul.append(li);

  var now = new Date()
  tasks.push({
    text: taskText,
    date: now
  });
  console.log(tasks);

}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
</head>

<body>

  <header>
    <h1>To-do list</h1>
  </header>

  <div>
    <button name="button" value="Add task" id="button">Add task</button>
    <input type="text" name="input" id="task" autofocus>
    <output name="result"></output>
    <ul id="todo"></ul>
  </div>

  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script type="text/javascript" src="todo.js"></script>

</body>

</html>

显示JS ToDo列表中有多少完成的任务与多少个任务

2 个答案:

}