Почему не работает onclick?
Функция removeItem() должна вызываться при нажатии на кнопку 'DELETE', но выдается ошибка
Uncaught SyntaxError: Invalid or unexpected token
const input = document.querySelector(".js-input"); const data = document.querySelector(".js-date"); const add = document.querySelector(".js-add"); let display = document.querySelector(".container2"); let todos = JSON.parse(localStorage.getItem("todos")) || []; displayFn(); add.addEventListener("click", () => { todos.push({ task: input.value, date: data.value, id: crypto.randomUUID(), }); console.log(todos); displayFn(); localStorage.setItem("todos", JSON.stringify(todos)); input.value = ""; data.value = ""; }); function displayFn() { display.innerHTML = todos .map((todo) => { return ` <div><input type='checkbox'/> ${todo.task}</div> <div>${todo.date}</div> <button onclick='removeItem(${todo.id})' class='remove' >DELETE</button> `; }) .join(""); } function removeItem(id) { todos = todos.filter((todo) => todo.id !== id); localStorage.setItem("todos", JSON.stringify(todos)); displayFn(); } |
const input = document.querySelector(".js-input"); const data = document.querySelector(".js-date"); const add = document.querySelector(".js-add"); let display = document.querySelector(".container2"); let todos = JSON.parse(localStorage.getItem("todos")) || []; displayFn(); add.addEventListener("click", () => { todos.push({ task: input.value, date: data.value, id: crypto.randomUUID(), }); console.log(todos); displayFn(); localStorage.setItem("todos", JSON.stringify(todos)); input.value = ""; data.value = ""; }); function displayFn() { display.innerHTML = todos .map((todo) => { return ` <div><input type='checkbox'/> ${todo.task}</div> <div>${todo.date}</div> <button onclick='removeItem(${todo.id})' class='remove' >DELETE</button> `; }) .join(""); } function removeItem(id) { todos = todos.filter((todo) => todo.id !== id); localStorage.setItem("todos", JSON.stringify(todos)); displayFn(); }
Дополнительно:
Обычно ошибка ведет на место в коде где ошибка, поэтому посмотри и напиши точнее.
А так?
onclick='removeItem("${todo.id}")'
- уааау сработало!! спасибо!!
- inkara98, лучшее спасибо это отметить ответ решением ))
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы разобраться, почему не работает onclick, нужно учитывать несколько возможных причин. Давайте рассмотрим некоторые из них:
1. Неправильное написание события onclick: Убедитесь, что вы правильно указали событие onclick в вашем HTML коде. Например, если у вас есть кнопка с id="myButton", то должен быть обработчик события в JavaScript, который будет выглядеть примерно так:
document.getElementById("myButton").onclick = function() { // ваш код здесь };
2. Ошибки в JavaScript коде: Проверьте ваш JavaScript код на наличие ошибок или опечаток. Даже один символ, поставленный не на своем месте, может привести к тому, что событие onclick не будет работать. Убедитесь, что весь ваш код написан правильно.
3. Проверьте, что элемент, к которому вы привязываете событие onclick, действительно существует на странице. Если вы обращаетесь к элементу по его id, убедитесь, что id указан правильно и что элемент загружен в момент выполнения вашего скрипта.
4. Возможно, у вас есть другие события, которые перекрывают событие onclick. Проверьте, нет ли конфликтов между разными обработчиками событий.
5. Проверьте, нет ли ошибок в CSS коде, которые могут мешать правильному отображению элемента, к которому привязано событие onclick. Например, элемент может быть скрыт или иметь неправильные размеры.
Если после всех этих проверок событие onclick все равно не работает, попробуйте создать минимально воспроизводимый пример проблемы и задать вопрос на форуме или в сообществе разработчиков для получения помощи.