Question

您好，作为练习的一部分，我必须使用以下实现创建一个待办事项列表。当我单击“待办事项”按钮时，会出现一个提示框，在其中输入我要记住的目标，然后将其添加到列表中，并将项数设置为列表中的项数。

该列表还为每个项目提供了一个删除按钮和一个检查按钮。复选按钮用于确定目标是否已完成，删除按钮用于删除特定目标。

很遗憾，我的删除按钮似乎无法正常工作。当我单击它时，它删除列表中的第一个项目，而不是删除选定的项目。我仍然不确定为什么。谁能提供正确的代码来解决此问题？谢谢。

const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

//This function creates a new list element
function newTodo() {
  var clicks = document.getElementsByTagName("input").length;
  var item = prompt("Please enter a goal", " ")
  if(item == null){
    return cheese
  }
  clicks ++;
  itemCountSpan.innerHTML = clicks;
  list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = clicks onclick = 'deleteToDo(this.value)'>Delete</button></li>"

}
//This function sets the unchecked count
function checker(){
    var Total = 0;
    for (var i = 0; i < document.getElementsByTagName("input").length; i++){
      if (!document.getElementsByTagName("input")[i].checked){
        Total ++;
        uncheckedCountSpan.innerHTML = Total;
      }
  }
}
//This function deletes a list element selected
function deleteToDo(sel_id){

  list.removeChild(document.getElementsByTagName("li")[sel_id]);
  var clicks = document.getElementsByTagName("input").length;
  itemCountSpan.innerHTML = clicks;

}

* {
  box-sizing: border-box;
}

html, body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.center {
  align-self: center;
}

.flow-right {
  display: flex;
  justify-content: space-around;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.title, .controls, .button {
  flex: none;
}

.button {
  padding: 10px 20px;
}

.todo-list {
  flex: 1 1 0;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.todo-delete {
  margin: 10px;
}

.todo-checkbox {
  margin: 10px;
}

.todo-container {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.todo-container:first-of-type {
  border-top: 1px solid #333;
}

<!DOCTYPE html>
<html>
  <head>
    <title>TODO App</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
  </head>
  <body>
    <div class="container center">
      <h1 class="center title">My TODO App</h1>
      <div class="flow-right controls">
        <span>Item count: <span id="item-count">0</span></span>
        <span>Unchecked count: <span id="unchecked-count">0</span></span>
      </div>
      <button class="button center" onClick="newTodo(); checker()">New TODO</button>
      <ul id="todo-list" class="todo-list"></ul>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

Answer 1

这将起作用。只需通过li处理程序传递要删除的onclick元素，然后将其从ul元素中删除即可。

const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

//This function creates a new list element
function newTodo() {
  var clicks = document.getElementsByTagName("input").length;
  var item = prompt("Please enter a goal", " ")
  if(item == null){
    return cheese
  }
  clicks ++;
  itemCountSpan.innerHTML = clicks;
  list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = clicks onclick = 'deleteToDo(this.parentElement)'>Delete</button></li>"

}
//This function sets the unchecked count
function checker(){
    var Total = 0;
    for (var i = 0; i < document.getElementsByTagName("input").length; i++){
      if (!document.getElementsByTagName("input")[i].checked){
        Total ++;
        uncheckedCountSpan.innerHTML = Total;
      }
  }
}
//This function deletes a list element selected
function deleteToDo(elem){

  list.removeChild(elem);

}

* {
  box-sizing: border-box;
}

html, body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.center {
  align-self: center;
}

.flow-right {
  display: flex;
  justify-content: space-around;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.title, .controls, .button {
  flex: none;
}

.button {
  padding: 10px 20px;
}

.todo-list {
  flex: 1 1 0;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.todo-delete {
  margin: 10px;
}

.todo-checkbox {
  margin: 10px;
}

.todo-container {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.todo-container:first-of-type {
  border-top: 1px solid #333;
}

<div class="container center">
      <h1 class="center title">My TODO App</h1>
      <div class="flow-right controls">
        <span>Item count: <span id="item-count">0</span></span>
        <span>Unchecked count: <span id="unchecked-count">0</span></span>
      </div>
      <button class="button center" onClick="newTodo(); checker()">New TODO</button>
      <ul id="todo-list" class="todo-list"></ul>
    </div>

Answer 2

我认为您在构建新列表li的行中存在一些语法错误，只是引号的位置。我认为应该这样，以便将clicks变量实际上设置为id和value而不是单词“ clicks”。

GetOverlappedResult

Answer 3

value需要设置为该函数中的实际变量。所以我所做的就是：

... value = " + (clicks-1) ...
//We use (clicks - 1) because the array is 0 based but clicks was previously incremented.

const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

//This function creates a new list element
function newTodo() {
  var clicks = document.getElementsByTagName("input").length;
  var item = prompt("Please enter a goal", " ")
  if(item == null){
    return cheese
  }
  clicks++;
  itemCountSpan.innerHTML = clicks;
  list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = " + (clicks-1) + " onclick = 'deleteToDo(this.value)'>Delete</button></li>"

}
//This function sets the unchecked count
function checker(){
    var Total = 0;
    for (var i = 0; i < document.getElementsByTagName("input").length; i++){
      if (!document.getElementsByTagName("input")[i].checked){
        Total ++;
        uncheckedCountSpan.innerHTML = Total;
      }
  }
}
//This function deletes a list element selected
function deleteToDo(sel_id){
  list.removeChild(document.getElementsByTagName("li")[sel_id]);
  var clicks = document.getElementsByTagName("input").length;
  itemCountSpan.innerHTML = clicks;

}

* {
  box-sizing: border-box;
}

html, body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.center {
  align-self: center;
}

.flow-right {
  display: flex;
  justify-content: space-around;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.title, .controls, .button {
  flex: none;
}

.button {
  padding: 10px 20px;
}

.todo-list {
  flex: 1 1 0;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.todo-delete {
  margin: 10px;
}

.todo-checkbox {
  margin: 10px;
}

.todo-container {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.todo-container:first-of-type {
  border-top: 1px solid #333;
}

<!DOCTYPE html>
<html>
  <head>
    <title>TODO App</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
  </head>
  <body>
    <div class="container center">
      <h1 class="center title">My TODO App</h1>
      <div class="flow-right controls">
        <span>Item count: <span id="item-count">0</span></span>
        <span>Unchecked count: <span id="unchecked-count">0</span></span>
      </div>
      <button class="button center" onClick="newTodo(); checker()">New TODO</button>
      <ul id="todo-list" class="todo-list"></ul>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

为列表中的每个项目实现删除按钮（JavaScript）

3 个答案: