Я ранее писал об этой странице, которую я пытаюсь создать, но у меня все еще возникают ошибки. Я очень новичок в этом и запутался. Мне нужно использовать для изображений от l oop до l oop и назначить прослушиватель событий для каждого из них, чтобы при нажатии на них они удалялись. Я запутался с разностными переменными и вставил html в свой javascript. Я все время получаю: «.addEventListener - это не функция», поэтому продолжаю что-то менять, но теряюсь.
<!DOCTYPE html> <html> <body> <div id = 'img'> <img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img"/> <img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img"/> </div> <script text="javascript"> let images = document.querySelectorAll("img"); for (let i = 0; i < images.length; i++){ images[i].addEventListener("click", () => { images[i].remove(); }); } </script> </body> </html>
Во-первых, у вас одинаковый идентификатор для вашего контейнера и обоих ваших изображений - идентификатор должен быть уникальным. Во-вторых, как уже упоминалось, вы не можете прикрепить eventListener к массиву объектов. Что-то вроде этого нужно сделать:
let images = document.querySelectorAll("[id^='img']"); for (let i = 0; i < images.length; i++){ images.forEach(i=>{i.addEventListener("click", () => { i.remove(); }); }); }
<div id = 'box'> <img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img1"/> <img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img2"/> </div>
images.addEventListener должно быть images[i].addEventListener. Вы хотите добавить слушателя к заданному c изображению из массива, а не к самому массиву. Аналогичная проблема с images.remove().
images.addEventListener
images[i].addEventListener
images.remove()
Вы напрямую обращаетесь к массиву, у которого не будет addEventListener. Попробуйте images [i] .addEventListener
Вам необходимо обновить ваш код, вы не используете индекс внутри l oop. Вы не можете добавить какой-либо слушатель непосредственно в массив изображений.
Это вам поможет - https://jsfiddle.net/n5mk9Lzj/
let images = document.querySelectorAll("img"); for (let i = 0; i < images.length; i++) { images[i].addEventListener("click", function() { images[i].remove(); }); }
, поэтому l oop поверх изображений и для каждого из них
// for each image in images image.onclick = function (e) { e.target.parentNode.removeChild(e.target);