Question

这是我的任务：

每次更新任务（选中它，取消选中或添加）输出元素应更新为已完成的数量任务和任务数。例如。如果您有7个任务且3个任务已完成，则应阅读 “ 3/7完成”。

在Js代码的第3部分，我创建了一个数组，其中包含用户输入创建的HTML列表中的所有任务元素。在底部的第5部分，我创建了一个名为taskAmount的函数，在该函数中，我尝试使用一些JavaScript函数来查找复选框的数量和待办事项列表中的元素数量。然后，我尝试返回这些值并将其打印到控制台以检查其是否有效。最后，我想尝试创建类似于示例中所示的输出，但是我认为一旦我首先获得想要的值，我就可以自己做。

我没有收到错误，但是我的功能似乎无法正常工作。我的猜测是我在taskAmount函数的前两行中犯了一个错误。

我的尝试：

tasks = [];

function addTask() {

  var li = document.createElement("li");

  // Adding checkbox
  var cbox = document.createElement('INPUT');
  cbox.setAttribute('type', 'checkbox');
  li.appendChild(cbox);
  cbox.setAttribute('id', 'box');

  // Adding thing to do
  var inputValue = document.getElementById("newTask").value;
  var task = document.createTextNode(inputValue);
  li.appendChild(task);

  if (inputValue === '') {
    alert("You must write something!");
  } else {
    var ullist = document.getElementById("list");
    ullist.insertBefore(li, ullist.childNodes[0]);
  }


  // Part 3
  tasks.push(newTask.value);

  document.getElementById("newTask").value = '';
}



// Prevent Default
document.getElementById("submit").addEventListener("click", function() {
  event.preventDefault()
});


// Part 4
function ifChecked() {
  var list1 = document.querySelector('ul');
  list1.addEventListener('click', function(ev) {
    if (ev.target.tagName === 'INPUT') {
      ev.target.parentElement.classList.toggle('checked');
    }
  }, false);
}
ifChecked();

// Part 5
function taskAmount() {
  var totalTasks;
  var checkedTasks;

  document.getElementById("submit").addEventListener('click', function() {
    var totalTasks = tasks.length;
    var checkedTasks = document.querySelectorAll('input[type="checkbox"]:checked').length;

    return (totalTasks);
    return (checkedTasks);
  })
  console.log(totalTasks);
  console.log(checkedTasks);
}
taskAmount();

body {
  width: 600px;
  margin: auto;
  background: #ffe699;
  font-family: garamond;
  font-size: 25px;
}

ul {
  list-style-type: none;
  padding: 0;
  border: 2px solid black;
}

ul li {
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: bold;
  transition: 0.3s;
}

fieldset {
  background: skyblue;
  border: 2px solid black;
}

ul li:nth-child(odd) {
  background-color: skyblue;
}

ul li:nth-child(even) {
  background-color: white;
}

ul li:hover {
  background-color: #55D;
}

#box {
  margin: 0px 20px 0px;
}

.checked {
  text-decoration: line-through;
}

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title> To do list </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <h1> To do list </h1>

  <form class="" action="todo.html" method="post">
    <fieldset>
      <label> Add a task in the input field below </label> <br><br>
      <input id="newTask" type="text" placeholder="Type a task here" autofocus> <br><br>
      <input id="submit" onclick="addTask()" type="submit" value="Add task"><br><br>
      <output name="result"> </output>
    </fieldset>
  </form>

  <h2>List of things to do</h2>

  <ul id="list">
  </ul>


  <script src="todo.js">
  </script>
</body>

</html>

Answer 1

删除taskAmount（）函数中的事件处理程序，然后从添加任务中调用该函数可解决此问题。还使您的ID对于生成的内容唯一。

tasks = [];
var idCount = 1;

function addTask() {

  var li = document.createElement("li");

  // Adding checkbox
  var cbox = document.createElement('INPUT');
  cbox.setAttribute('type', 'checkbox');
  cbox.addEventListener('change', taskAmount);
  li.appendChild(cbox);
  cbox.setAttribute('id', 'box' + idCount);
  idCount++;
  // Adding thing to do
  var inputValue = document.getElementById("newTask").value;
  var task = document.createTextNode(inputValue);
  li.appendChild(task);

  if (inputValue === '') {
    alert("You must write something!");
  } else {
    var ullist = document.getElementById("list");
    ullist.insertBefore(li, ullist.childNodes[0]);
  }


  // Part 3
  tasks.push(newTask.value);

  document.getElementById("newTask").value = '';
  taskAmount();
}



// Prevent Default
document.getElementById("submit").addEventListener("click", function() {
  event.preventDefault()
});


// Part 4
function ifChecked() {
  var list1 = document.querySelector('ul');
  list1.addEventListener('click', function(ev) {
    if (ev.target.tagName === 'INPUT') {
      ev.target.parentElement.classList.toggle('checked');
    }
  }, false);
}
ifChecked();

// Part 5
function taskAmount() {  
  var totalTasks = tasks.length;
  var checkedTasks = document.querySelectorAll('input[type="checkbox"]:checked').length;

  console.log(totalTasks);
  console.log(checkedTasks);
}

body {
  width: 600px;
  margin: auto;
  background: #ffe699;
  font-family: garamond;
  font-size: 25px;
}

ul {
  list-style-type: none;
  padding: 0;
  border: 2px solid black;
}

ul li {
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: bold;
  transition: 0.3s;
}

fieldset {
  background: skyblue;
  border: 2px solid black;
}

ul li:nth-child(odd) {
  background-color: skyblue;
}

ul li:nth-child(even) {
  background-color: white;
}

ul li:hover {
  background-color: #55D;
}

#box {
  margin: 0px 20px 0px;
}

.checked {
  text-decoration: line-through;
}

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title> To do list </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <h1> To do list </h1>

  <form class="" action="todo.html" method="post">
    <fieldset>
      <label> Add a task in the input field below </label> <br><br>
      <input id="newTask" type="text" placeholder="Type a task here" autofocus> <br><br>
      <input id="submit" onclick="addTask()" type="submit" value="Add task"><br><br>
      <output name="result"> </output>
    </fieldset>
  </form>

  <h2>List of things to do</h2>

  <ul id="list">
  </ul>


  <script src="todo.js">
  </script>
</body>

</html>

Answer 2

totalTasks和checkedTasks不在函数外部定义。我更新了代码，以使您单击后更新checkedTasks

tasks = [];

function addTask() {

  var li = document.createElement("li");

  // Adding checkbox
  var cbox = document.createElement('INPUT');
  cbox.setAttribute('type', 'checkbox');
  li.appendChild(cbox);
  cbox.setAttribute('id', 'box');

  // Adding thing to do
  var inputValue = document.getElementById("newTask").value;
  var task = document.createTextNode(inputValue);
  li.appendChild(task);

  if (inputValue === '') {
    alert("You must write something!");
  } else {
    var ullist = document.getElementById("list");
    ullist.insertBefore(li, ullist.childNodes[0]);
  }


  // Part 3
  tasks.push(newTask.value);
  //console.log(tasks);
  document.getElementById("newTask").value = '';
}



// Prevent Default
document.getElementById("submit").addEventListener("click", function() {
  event.preventDefault()
});


// Part 4
function ifChecked() {
  var list1 = document.querySelector('ul');
  
  list1.addEventListener('click', function(ev) {
    
    if (ev.target.tagName === 'INPUT') {
      ev.target.parentElement.classList.toggle('checked');
      
      var checkedTasks = document.querySelectorAll('input[type="checkbox"]:checked').length;
      console.log(checkedTasks);
      
    }
  }, false);
  
  
  
}
ifChecked();

// Part 5
function taskAmount() {
  var totalTasks;
  var checkedTasks;

  document.getElementById("submit").addEventListener('click', function() {
    var totalTasks = tasks.length;
   // console.log(totalTasks)
    var checkedTasks = document.querySelectorAll('input[type="checkbox"]:checked').length;
    console.log(totalTasks);
 // console.log(checkedTasks);
    return (totalTasks);
    return (checkedTasks);
    
  })
 // console.log(totalTasks);
 // console.log(checkedTasks);
}
taskAmount();

body {
  width: 600px;
  margin: auto;
  background: #ffe699;
  font-family: garamond;
  font-size: 25px;
}

ul {
  list-style-type: none;
  padding: 0;
  border: 2px solid black;
}

ul li {
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: bold;
  transition: 0.3s;
}

fieldset {
  background: skyblue;
  border: 2px solid black;
}

ul li:nth-child(odd) {
  background-color: skyblue;
}

ul li:nth-child(even) {
  background-color: white;
}

ul li:hover {
  background-color: #55D;
}

#box {
  margin: 0px 20px 0px;
}

.checked {
  text-decoration: line-through;
}

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title> To do list </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <h1> To do list </h1>

  <form class="" action="todo.html" method="post">
    <fieldset>
      <label> Add a task in the input field below </label> <br><br>
      <input id="newTask" type="text" placeholder="Type a task here" autofocus> <br><br>
      <input id="submit" onclick="addTask()" type="submit" value="Add task"><br><br>
      <output name="result"> </output>
    </fieldset>
  </form>

  <h2>List of things to do</h2>

  <ul id="list">
  </ul>


  <script src="todo.js">
  </script>
</body>

</html>

Answer 3

我从您的taskAmount（）函数返回了一个对象，并在单击Submit之后将其呈现到html中。我还摆脱了您的第二个Submit事件处理程序。

tasks = [];
tasklist = [];
var checked = 0; 
var total = 0; 
  
function addTask() {

  var li = document.createElement("li");


  // Adding checkbox
  var cbox = document.createElement('INPUT');
  cbox.setAttribute('type', 'checkbox');
  li.appendChild(cbox);
  cbox.setAttribute('id', 'box');

  // Adding thing to do
  var inputValue = document.getElementById("newTask").value;
  var task = document.createTextNode(inputValue);
  li.appendChild(task);

  if (inputValue === '') {
    alert("You must write something!");
  } else {
    var ullist = document.getElementById("list");
    ullist.insertBefore(li, ullist.childNodes[0]);
  }


  // Part 3
  tasks.push(newTask.value);

  document.getElementById("newTask").value = '';
}




// Prevent Default
document.getElementById("submit").addEventListener("click", function() {
  event.preventDefault()
  document.getElementById("finished_tasks").innerHTML = taskAmount().checked + "/" +      taskAmount().total;
});


// Part 4
  var list1 = document.querySelector('ul');
  var finished = document.getElementById("finished_tasks"); 
  list1.addEventListener('click', function(ev) {
   
    if(ev.target.tagName === 'INPUT'){
     ev.target.parentElement.classList.toggle('checked');
      document.getElementById("finished_tasks").innerHTML = taskAmount().checked + "/" +           taskAmount().total;
    }
  }, false);



// Part 5
function taskAmount() {
  var totalTasks;
  var checkedTasks;

  var totalTasks = tasks.length;
  var checkedTasks = document.querySelectorAll('input[type="checkbox"]:checked').length;
  tasklist = ({
    checked: checkedTasks,
    total: totalTasks
  });

  return tasklist;
}

body {
  width: 600px;
  margin: auto;
  background: #ffe699;
  font-family: garamond;
  font-size: 25px;
}

ul {
  list-style-type: none;
  padding: 0;
  border: 2px solid black;
}

ul li {
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: bold;
  transition: 0.3s;
}

fieldset {
  background: skyblue;
  border: 2px solid black;
}

ul li:nth-child(odd) {
  background-color: skyblue;
}

ul li:nth-child(even) {
  background-color: white;
}

ul li:hover {
  background-color: #55D;
}

#box {
  margin: 0px 20px 0px;
}

.checked {
  text-decoration: line-through;
}

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title> To do list </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <h1> To do list </h1>

  <form class="" action="todo.html" method="post">
    <fieldset>
      <label> Add a task in the input field below </label> <br><br>
      <input id="newTask" type="text" placeholder="Type a task here" autofocus> <br><br>
      <input id="submit" onclick="addTask()" type="submit" value="Add task"><br><br>
      <output name="result"> </output>
    </fieldset>
  </form>

  <h2>List of things to do</h2>

  <ul id="list">
  </ul>
  <div id="finished_tasks"></div>


  <script src="todo.js">
  </script>
</body>

</html>

Answer 4

在您的代码中还有更多奇怪的事情。首先，您已经在taskAmount函数的作用域中定义了totalTasks和checkedTasks变量，但随后在click handler函数中定义了它们。如果要将值保留在整个taskAmount函数中，则关键字var不应该存在。

也只会执行点击处理程序函数的第一次返回，但这并不重要，因为无论如何您都不使用返回的值。

所以尝试这样：

function taskAmount() {
  var totalTasks;
  var checkedTasks;

  document.getElementById("submit").addEventListener('click', function() {
    totalTasks = tasks.length;
    checkedTasks = document.querySelectorAll('input[type="checkbox"]:checked').length;
  })
  console.log(totalTasks);
  console.log(checkedTasks);
}

如何计算待办事项列表中已检查元素的数量和总元素的数量

4 个答案: