Javascript 清单：编辑和删除按钮答案

【问题标题】：Javascript checklist: Edit and Delete buttonJavascript 清单：编辑和删除按钮
【发布时间】：2016-07-04 09:16:45
【问题描述】：

我需要制作一个已完成的 Javascript 待办事项列表（清单），但我不知道如何使编辑和删除按钮也出现在输入的每个项目中。 Here is what I have so far

<!doctype html>
<html>
<head>
  <title>To Do List</title>
  <link rel="stylesheet" type="text/css" href="ToDoList.css">
</head>
<body>
  <h1> To Do List</h1>
  <div id = "listBox">
    <input type="text" id="inItemText"><button id = "btnAdd">Add</button>
  </div>
  <div class="tasks-parent">
    <h4>Tasks:</h4>
    <ul id = "todolist">
    </ul>
  </div>
  <script src ="ToDoList.js"></script>
</body>
</html>

#btnAdd {
  text-transform: uppercase;
  background: #22B473;
  border: none;
  border-radius: 3px;
  font-weight: bold;
  color: #FFF;
  padding: 3px 10px;
  cursor: pointer;
  width: auto;
}

.tasks-parent {
  border: 2px solid #777;
  margin-top: 5px;
  width: 17%;
}

html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 400px;
}

li {
  padding: 5px 10px;
  color: #000;
}

li span {
  padding-left: 17px;
}

function updateItemStatus() {
  var cbId = this.id.replace("cb_", "");
  var itemText = document.getElementById("item_" + cbId);
  if (this.checked) {
    itemText.style.textDecoration = "line-through";
  } else {
    itemText.style.textDecoration = "none";
  }
}

function addNewItem(list, itemText) {
  var date = new Date();
  var id = "" + date.getMinutes(); + date.getSeconds() +
    date.getMilliseconds() + "";

  var listItem = document.createElement("li");
  listItem.id = "li_" + id;

  var checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.id = "cb_" + id;
  checkBox.onclick = updateItemStatus;

  var span = document.createElement("span");
  span.id = "item_" + id;
  span.innerText = itemText;
  listItem.appendChild(checkBox);
  listItem.appendChild(span);
  list.appendChild(listItem);
}

var inItemText = document.getElementById("inItemText");
inItemText.focus();

var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
  var inItemText = document.getElementById("inItemText");
  var itemText = inItemText.value;
  if (!itemText || itemText === "" || itemText === " ") {
    return false;
  }

  addNewItem(document.getElementById("todolist"), itemText);
};

inItemText.onkeyup = function(event) {
  if (event.which == 13) {
    var itemText = inItemText.value;

    if (!itemText || itemText === "" || itemText === " ") {
      return false;
    }

    addNewItem(document.getElementById("todolist"), itemText);
    inItemText.focus();
    inItemText.select();
  }
};

【问题讨论】：

我刚刚为您正确缩进了您的代码。适当的缩进是你应该养成的习惯。它使您的代码更具可读性和更易于调试。另外，人们不倾向于回答格式不佳的问题:)

标签： javascript html css ecmascript-6 checklistbox

【解决方案1】：

您需要创建另外两个元素（一个用于编辑，一个用于删除）并像处理其他元素一样附加它们：

function updateItemStatus() {
  var cbId = this.id.replace("cb_", "");
  var itemText = document.getElementById("item_" + cbId);

  if (this.checked) {
    itemText.style.textDecoration = "line-through";
  } else {
    itemText.style.textDecoration = "none";
  }

}


function addNewItem(list, itemText) {

  var date = new Date();
  var id = "" + date.getMinutes(); + date.getSeconds() +
    date.getMilliseconds() + "";

  var listItem = document.createElement("li");
  listItem.id = "li_" + id;

  var checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.id = "cb_" + id;
  checkBox.onclick = updateItemStatus;

  var span = document.createElement("span");
  span.id = "item_" + id;
  span.innerText = itemText;
  //create edit
  var edit = document.createElement("a");
  edit.href = "#";
  edit.innerText = "edit";
  //create delete
  var deleteBtn = document.createElement("a");
  deleteBtn.href = "#";
  deleteBtn.innerText = "delete";


  listItem.appendChild(checkBox);
  listItem.appendChild(span);
  //and append them in li
  listItem.appendChild(edit);
  listItem.appendChild(deleteBtn);

  list.appendChild(listItem);
}

var inItemText = document.getElementById("inItemText");
inItemText.focus();

var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
  var inItemText = document.getElementById("inItemText");

  var itemText = inItemText.value;
  if (!itemText || itemText === "" || itemText === " ") {
    return false;
  }

  addNewItem(document.getElementById("todolist"), itemText);
};

inItemText.onkeyup = function(event) {

  if (event.which == 13) {
    var itemText = inItemText.value;

    if (!itemText || itemText === "" || itemText === " ") {
      return false;
    }

    addNewItem(document.getElementById("todolist"), itemText);

    inItemText.focus();
    inItemText.select();
  }

};

#btnAdd {
  text-transform: uppercase;
  background: #22B473;
  border: none;
  border-radius: 3px;
  font-weight: bold;
  color: #FFF;
  padding: 3px 10px;
  cursor: pointer;
  width: auto;
}
.tasks-parent {
  border: 2px solid #777;
  margin-top: 5px;
  width: 35%;
}
html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 400px;
}
li {
  padding: 5px 10px;
  color: #000;
}
li span {
  padding-left: 17px;
}
li a {
  padding: 0 5px 0 5px;
}

<h1> To Do List</h1>
<div id="listBox">
  <input type="text" id="inItemText">
  <button id="btnAdd">Add</button>
</div>
<div class="tasks-parent">
  <h4>Tasks:</h4>
  <ul id="todolist">
  </ul>
</div>

【讨论】：

非常感谢！我现在无法编写代码来实际编辑和删除它们

【解决方案2】：

您需要在附加的范围内包含按钮。还需要将 .innerText 改为 .innerHTML

span.innerHTML = itemText + "<button>Edit</button><button>Delete</button>";

为插入的按钮添加类以设置样式

【讨论】：