Как увеличить каждое последующее изображение в цикле for на 5 пикселей

Question

Я написал скрипт в разделе моего HTML-кода, чтобы вывести изображение в браузер 10 раз, используя цикл for. Это прекрасно работает, но я также хочу написать скрипт в элементе заголовка разметки, где я могу, возможно, использовать функцию, чтобы сначала создать HTMLCollection из элементов изображения, а затем перебрать все десять изображений в коллекции, добавив 5 пикселейк свойствам ширины и высоты каждого последующего элемента изображения слева направо при нажатии любого из десяти изображений.

Я пытался исследовать информацию о HTMLCollections в сочетании с DOM-связанными свойствами и другими уравнениями, но пока безуспешно.

Скрипт из элемента body

<section>

    <h2>Growing Pumpkins</h2>

    <p id="smashingPumpkins" onclick="growingPumpkins(this)" ></p>      

    <script>           

        for (var i = 0; i < 10; i++) {                

            document.getElementById("smashingPumpkins").innerHTML += "<img src='bandit.png' />";              

        }

    </script>

</section>

Скрипт из элемента head:

<script>        

    function growingPumpkins(img) {

        var img = document.images;

        for (index in img) {                

            document.getElementById("smashingPumpkins").innerHTML = img[index].style.width + 1.05;
            document.getElementById("smashingPumpkins").innerHTML = img[index].style.height + 1.05;
        }
    }        

</script>

Размер каждого изображения должен увеличиться на 5 пикселей, охватывающих слева направо (извините за избыточность) при выводе в браузер. Однако мне не удалось этого сделать, и я вижу число 1,05 только при нажатии на одно из изображений.

Answer 1

Как насчет этого?

for (var i = 0; i < 10; i++) {                

  document.getElementById("smashingPumpkins").innerHTML += 
    `<img src='bandit.png' style="width:${base + i*5}px; height:${base + i*5}px   "/>`;              

}

Конечно, «базовый», используемый в атрибуте стиля, это то, что вы устанавливаете, например, 100 или сколько угодно пикселей, которые вы хотите, чтобы высота и ширина первого былибыть

РЕДАКТИРОВАТЬ: Это было просто для того, чтобы каждая фотография была больше, чем предыдущая, что не совсем то, что вы просили. Но ваш комментарий заставляет меня думать, что я должен оставить его в учебных целях. Что вы могли бы сделать, чтобы каждое изображение расширялось при клике, и каждое из них расширялось на 10px больше, чем предыдущее, вот что:

Добавьте класс к вашим изображениям для легкого нацеливания, а затем наведите их на массив:

for (var i = 0; i < 10; i++) {                
  document.getElementById("smashingPumpkins").innerHTML +=
    "<img src='bandit.png' class="expandingImg" />";              
}

var images = document.querySelectorAll('.expandingImg') // creates an array of your image elements

Теперь переберите ваш массив элементов и присоедините прослушиватель событий к каждому из них. Слушатель событий изменит элемент стиля этого элемента, основываясь на позиции элемента в массиве. Поэтому элементы позже в массиве будут расширяться больше, чем элементы ранее в массиве. Это также устраняет необходимость в onclick="growingPumpkins(this)", поскольку добавляются списки событий в это немедленно вызванное функциональное выражение (IIFE):

(function growingPumpkins() {
  for (let i = 0; i < images.length; i++) {                
     images.addEventListener('click', function(){
       images[i].style = `style="width:${base + i*5}px; height:${base + i*5}px`
     }, false)
})()

Я думаю, что это следует сделать. Вам нужно будет добавить еще один прослушиватель событий, чтобы они сократились до своего первоначального размера, например mouseleave или что-то в этом роде. Надеюсь, это работает и полезно.