@FetterDetkaa

Как обработать DOM события на чистом JS?

Делаю to-do list на чистом js
Для удаления задачи я хочу использовать клик по картинке.
Однако возникла проблема, картинка появляется только после добавления задачи(то есть уже после загруки страницы и onload не срабатывает), как мне обратится к ней и подключить EVENT LISTENER.
Если проще, нужна либо замена jQuery(document).ready на JavaScript, либо какой-то способ создать функцию которая будет срабатывать при любом изменении на web странице
window.onload = function() {
            var addTaskButton =  document.getElementById('add-task-button');
            var deleteTaskButton = document.getElementsByClassName('task-delete-button');
            addTaskButton.addEventListener('click', createNewTask);
            
             
             
        
              document.addEventListener("keyup", (keyPressed) => {
                const keyEnter = 13;
                if (keyPressed.which == keyEnter) {
                    createNewTask();
                }
            });


             function taskCollector (){
                let inputtext= document.getElementById("task-text");
                let tasktext = inputtext.value;
                const listitem = document.createElement("li");
                const checkbox = document.createElement("input");
                const span = document.createElement("span");
                const img = document.createElement("img");
                listitem.classList.add("list-item");
                span.classList.add("task-text");
                checkbox.type="checkbox";
                img.src="bin.png";
                listitem.classList.add("task");
                img.classList.add("task-delete-button");
                span.innerText = tasktext;
                listitem.appendChild(checkbox);
                listitem.appendChild(span);
                listitem.appendChild(img);
                return(listitem);
             }

             function createNewTask(){
                let inputtext= document.getElementById("task-text");
                if(inputtext.value == ""){
                    alert("Ввдите текст новой задачи!");
                }else{
                    newtask = taskCollector();
                    let startlist = document.getElementById("listStart");
                    startlist.prepend(newtask);
                    document.getElementById("task-text").value = "";
                
                }
           
             }
             function deleteTask(){
                
             }
         };
  • Вопрос задан
  • 94 просмотра
Решения вопроса 2
У todo item есть родительский элемент, отлавливай клик на нем, а реальный елемент на котором кликнули отлавливай в e.target
Ответ написан
Комментировать
yarkov
@yarkov Куратор тега JavaScript
Помог ответ? Отметь решением.
какой-то способ создать функцию которая будет срабатывать при любом изменении на web странице

https://developer.mozilla.org/ru/docs/Web/API/Muta...
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы