Пример списка дел в javascript: проблемы с выполненными задачами

enter image description here

function todoList() {
  var item = document.getElementById('todoInput').value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  newItem.appendChild(text)
  var completed_button = document.createElement('input');
  completed_button.type = "button";
  completed_button.value = "Completed";
  newItem.appendChild(completed_button);
  document.getElementById("todoList").appendChild(newItem)
}
<h1>My To Do list</h1>
<form id="todoForm">
  <input id="todoInput">
  <button type="button" onclick="todoList()">Add Item</button>
</form>
<ul id="todoList">
  <h3>My Tasks</h3>
</ul>
<ul>
  <h3>Completed</h3>
</ul>

Когда я нажимаю на завершенную кнопку, я хочу удалить ее из Мои задачи и добавить в Завершенный. Вы можете помочь?

Возможно, вы захотите проголосовать за ответ, так как странно видеть принятый с оценкой 0!

Takit Isy 04.05.2018 11:40
1
1
680
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я немного поигрался с вашим кодом и получил этот фрагмент: (Я оставил комментарии в коде)

function todoList() {
  var item = document.getElementById('todoInput').value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  newItem.appendChild(text)
  var completed_button = document.createElement('input');
  completed_button.type = "button";
  completed_button.value = "Completed";
  completed_button.onclick = function() { // Added the onclick function
    clickComplete(this);
  };
  newItem.appendChild(completed_button);
  document.getElementById("todoList").appendChild(newItem);
}

// Added this function
function clickComplete(item) {
  document.getElementById("completed").appendChild(item.parentNode);
  item.remove(); // Removes the "completed" button
}
<h1>My To Do list</h1>
<form id="todoForm">
  <input id="todoInput">
  <button type="button" onclick="todoList()">Add Item</button>
</form>
<ul id="todoList">
  <h3>My Tasks</h3>
</ul>
<ul id="completed">
  <h3>Completed</h3>
</ul>

Не стесняйтесь комментировать меня, если в этот фрагмент будут внесены какие-либо изменения.

Надеюсь, поможет.

Другие вопросы по теме