// находим элементы на странице
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const form = document.querySelector('#from'); const taskInput = document.querySelector('#taskInput'); from.addEventListener('submit', function (event) { // отменяем отправку формы event.preventDefault(); // достаем текст задачи из поля ввода const taskText = taskInput.value; // формируем разметку для новой задачи const taskHTML = ` <li class="list-group-item d-flex justify-content-between task-item"> <span class="task-title">${taskText}</span> <div class="task-item__buttons"> <button type="button" data-action="done" class="btn-action"> <img src="./img/tick.svg" alt="Done" width="18" height="18"> </button> <button type="button" data-action="delete" class="btn-action"> <img src="./img/cross.svg" alt="Done" width="18" height="18"> </button> </div>; </li>`; console.log(taskHTML); }) |
@alina.sazhina2007 Ошибка Uncaught ReferenceError: from is not defined возникает потому, что вы пытаетесь использовать переменную from, которая не была объявлена. Возможно, вы хотели использовать переменную form, которую вы уже объявили. Вам нужно заменить from на form в вашем коде. Вот исправленный код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
const form = document.querySelector('#from'); const taskInput = document.querySelector('#taskInput'); form.addEventListener('submit', function (event) { // отменяем отправку формы event.preventDefault(); // достаем текст задачи из поля ввода const taskText = taskInput.value; // формируем разметку для новой задачи const taskHTML = ` <li class="list-group-item d-flex justify-content-between task-item"> <span class="task-title">${taskText}</span> <div class="task-item__buttons"> <button type="button" data-action="done" class="btn-action"> <img src="./img/tick.svg" alt="Done" width="18" height="18"> </button> <button type="button" data-action="delete" class "btn-action"> <img src="./img/cross.svg" alt="Done" width="18" height="18"> </button> </div> </li>`; console.log(taskHTML); }); |