Question

我需要制作一个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();
  }
};

Answer 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>

Answer 2

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

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

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

Javascript清单：编辑和删除按钮

2 个答案: