Блог

Я пытался удалить или проверить кнопку, когда пользователь нажимает на кнопку. Это работает, но когда я нажимаю на значки buton, он не удаляет список и не проверяет его, если пользователь нажимает на галочку. Итак, у меня есть что-то вроде этого:

 <button> //here I actually have code if user clicks on it (check or delete mark button) it deletes or check it as task completed
     <span>
         <i></i> // here I have icons of delete and check mark
     </span>
 </button>
  

Это создается внутри кода JavaScript (как показано ниже)
Как я могу применить то же самое к значкам, которые будут созданы позже, а не уже в моем html. Если вы проверите мой код, он:

icontainerforremove.className = «fas fa-trash-alt»; icontainer.className = «fas fa-check-circle»;

Это два вышеупомянутых, я не уверен, как заставить это работать, если пользователь нажимает на значки кнопки, а не на кнопку (это работает при нажатии кнопки, но у меня есть маленькие значки внутри кнопки, такие как check и bin — поэтому удалить его не работает, когда пользователь нажимает на эти значки) Я не знаю, как добавить туда эти функциональные возможности, поскольку они создаются позже внутри javascript. Если требуется больше объяснений, пожалуйста, дайте мне знать. Любая помощь приветствуется.

Мой код:

 const todoInput = document.querySelector(".form-control");
const todoButton = document.querySelector(".add");
const todoList = document.querySelector(".todo-list");

document.addEventListener("DOMContentLoaded", getTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);

function addTodo(event) {
  event.preventDefault();

  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo-item");

  const newTodo = document.createElement("h6");
  newTodo.innerText = todoInput.value;
  newTodo.classList.add("list-item-text");

  todoDiv.appendChild(newTodo);
  saveLocalTodos(todoInput.value);

  const removeButton = document.createElement("button");

  removeButton.classList =
    "remove btn btn-primary font-weight-bold float-right mt--20";
  changeColorRemove(removeButton);

  const spancontainerforremove = document.createElement("span");
  const icontainerforremove = document.createElement("i");

  icontainerforremove.className = "fas fa-trash-alt";


  spancontainerforremove.appendChild(icontainerforremove);
  removeButton.appendChild(spancontainerforremove);

  todoDiv.appendChild(removeButton);

  const completedButton = document.createElement("button");

  changeColor(completedButton);

  completedButton.classList =
    "complete btn btn-primary font-weight-bold float-right mr-1 mt--20";

  const spancontainer = document.createElement("span");
  const icontainer = document.createElement("i");

  icontainer.className = "fas fa-check-circle";

  spancontainer.appendChild(icontainer);
  completedButton.appendChild(spancontainer);

  todoDiv.appendChild(completedButton);

  todoList.appendChild(todoDiv);
  todoInput.value = "";
}

function deleteCheck(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove") || tgt.classList[0] ==="fas") {
    removeLocalTodos(tgt);
    tgt.closest("div").remove();
  } else if (tgt.classList[0] === "complete") {
    const todo = tgt.parentElement;
    todo.classList.toggle("completed");
    console.log(todo);
    tgt.closest("div").style.setProperty("text-decoration", "line-through");
    tgt.closest("div").style.setProperty("opacity", "0.2");
  }
}
function changeColor(completedButton) {
  completedButton.style.setProperty("background-color", "#41e141");
  completedButton.style.setProperty("border", " 1px solid #41e141");
}

function changeColorRemove(removeButton) {
  removeButton.style.setProperty("background-color", "#FF0000");
  removeButton.style.setProperty("border", " 1px solid #FF0000");
}

function saveLocalTodos(todo) {
  let todos;
  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }

  todos.push(todo);
  localStorage.setItem("todos", JSON.stringify(todos));
}

function getTodos() {
  let todos;

  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }
  todos.forEach(function (todo) {
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo-item");

    const newTodo = document.createElement("h6");
    newTodo.innerText = todo;
    newTodo.classList.add("list-item-text");

    todoDiv.appendChild(newTodo);

    const removeButton = document.createElement("button");

    removeButton.classList =
      "remove btn btn-primary font-weight-bold float-right mt--20";
    changeColorRemove(removeButton);

    const spancontainerforremove = document.createElement("span");
    const icontainerforremove = document.createElement("i");

    icontainerforremove.className = "fas fa-trash-alt";

    spancontainerforremove.appendChild(icontainerforremove);
    removeButton.appendChild(spancontainerforremove);

    todoDiv.appendChild(removeButton);

    const completedButton = document.createElement("button");

    changeColor(completedButton);

    completedButton.classList =
      "complete btn btn-primary font-weight-bold float-right mr-1 mt--20";

    const spancontainer = document.createElement("span");
    const icontainer = document.createElement("i");

    icontainer.className = "fas fa-check-circle";

    spancontainer.appendChild(icontainer);
    completedButton.appendChild(spancontainer);

    todoDiv.appendChild(completedButton);

    todoList.appendChild(todoDiv);
  });
}

function removeLocalTodos(todo) {
  let todos;
  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }
  const todoIndex = todo.children[0].innerText;
  todos.splice(todos.indexOf(todoIndex), 1);
  localStorage.setItem("todos", JSON.stringify(todos));
}
  

Проблема, с которой вы столкнулись, связана с тем, как вы используете привязку событий. Вы привязываете обработчик событий при загрузке своей страницы. Хотя элементы, добавленные с помощью вашего скрипта, не привязаны к обработчику событий.

Вы можете исправить это, либо привязав свой обработчик событий к вновь добавленным элементам. Или используйте обработчик событий делегата, который также будет привязываться к вновь добавленным элементам.

Измените свой код на этот:

 function addTodo(event) {
    /* other code omitted for brevity */

    todoButton.addEventListener("click", addTodo);
    removeButton.addEventListener("click", deleteCheck);
}
  

Обновить

После лучшего понимания вашего вопроса, возможно, вы можете попробовать использовать это правило css: pointer-events: none;

Чтобы создать элемент, на который вы наложили это правило, щелкните по нему. Таким образом, вы могли бы стилизовать свои i теги с помощью этого. И ваше событие щелчка должно попасть на вашу кнопку.

Итак:

 <button> <-- let's say this has a click event
    My button <i class="fa fa-plus-sign"></i> <-- this has the css style pointer-events: none;
</button>
  

Нажатие на тег i (в данном случае значок) приведет к тому, что щелчок пройдет через значок и попадет на кнопку. Если я правильно вас понял, это должно сработать.