Как заставить DOM Manipulation работать с изображениями?

Question

Я пытаюсь изменить размер изображения при нажатии с помощью манипуляции с DOM. Я пробую следующий код, но он не работает.

var images = document.getElementsByTagName("img")

//these 12 images are stored in var 'images' but do not react when clicked.

images.addEventListener("click", function() {
    height: "500px";
    width: "500px"
});

//JS and HTML files are connected.

Answer 1

Есть две основные проблемы с вашим кодом:

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

2. Строка height: "500px"; является присвоением переменной и не изменить стиль изображения. Вам нужно будет установить стиль напрямую.

Чтобы исправить эти проблемы:

1. Выполните итерацию по массиву и добавьте прослушиватель событий к каждому изображению:

for (let image of images) {
    image.addEventListener("click", function() {
        // Code goes here
    });
}

Изменить стиль изображения напрямую

image.style.height = "500px";
image.style.width = "500px";

Окончательный результат будет выглядеть так:

for (let image of images) {
    image.addEventListener("click", function() {
       image.style.height = "500px";
       image.style.width = "500px";
    });
}

Answer 2

Я обнаружил две ошибки в вашем коде.

---

1) Вы вызываете addEventListener в массиве.

getElementsByTagName возвращает массив узлов, и вам нужно добавить событие для каждого вручную, например:

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener(...);
}

---

2) Вы набрали CSS в контексте Javascript :)

Содержимое функции должно быть Javascript кодом, а не CSS.

Это должно работать:

images[i].addEventListener("click", function() {
   this.style.height = "500px";
   this.style.width = "500px";
});

---

Окончательный результат будет выглядеть так это:

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener("click", function() {
       this.style.height = "500px";
       this.style.width = "500px";
    });
}

Answer 3

Вы не можете просто прикрепить обработчик событий к коллекции через прямой javascript, в jquery вы можете сделать что-то подобное (но я почти уверен, что он просто выполняет итерацию коллекции через инкапсуляцию). Вам нужно выполнить итерацию коллекции, а затем добавить прослушиватель событий к каждому элементу в коллекции:

for(let x = 0; x < images.length; x++){
    images[x].addEventListener("click", function() {
       this.style.height = "500px";
       this.style.width = "500px";
    });
}