Проблема с запуском по клику для постепенного увеличения размера каждого изображения в цикле for

Question

Я пытаюсь написать скрипт в элементе заголовка моей веб-страницы, где цикл из 10 изображений будет последовательно увеличиваться на 5 пикселей каждый при нажатии любого из зацикленных изображений. Когда срабатывает onclick, он создает цикл, который корректно увеличивает размер каждого изображения, но, к сожалению, этот вывод добавляется в конец исходного цикла вместо его изменения.

В моем скрипте элемента head я сначала попытался использовать getDocumentById (), затем переключился на передачу ссылки "this" на функцию, но получил тот же результат. Я также пытался использовать addEventListener (), но это тоже не сработало.

В элементе head:

<script>        

    function growingPumpkins(e) {           

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

            e.innerHTML += `<img src='bandit.png' style="width:${50 + i * 5}px; height:${50 + i * 5}px   "/>`; 

        }

    }        

</script>

В элементе 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>

Сначала я хотел создать HTMLCollection в элементе head для достижения желаемого результата, но не смог получить никакого вывода при попытке этого. Прямо сейчас я все еще получаю цикл onclick, соединенный с оригинальным циклом.

Answer 1

Чтобы использовать утверждения литералов шаблона ${foo}, нужны обратные пометки, а не кавычки

`Text ${foo} text`

e.innerHTML += используется для добавления к текущему HTML-элементу, а не для увеличения размера элемента. элемент.

Вместо этого: нет необходимости в for петлях. Используйте document.querySelectorAll() и NodeList.forEach() с Element.addEventListener(), чтобы присоединить нужную функцию к обработчику событий

const grow = ev => {
  const el = ev.currentTarget;
  el._w = el._w ? el._w + 10 : 40;
  el.style.width = `${el._w}px`;
}; 

document.querySelectorAll(".grow").forEach(el => el.addEventListener('click', grow));

.grow {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  transition: width 0.3s;
  cursor: pointer;
}

<img class="grow" src="https://i.imgur.com/GDUJj6t.jpg">
<img class="grow" src="https://i.imgur.com/GDUJj6t.jpg">

Увеличение размера нескольких изображений при родительском щелчке :

const el_backyard = document.querySelector("#backyard");
const tot = 5;       // total images
const min_size = 30; // px
const step = 10;     // increase by 10 px

// PLANT
for (let i=1; i<=tot; i++) {
  const el = new Image();
  el.src = "https://i.imgur.com/GDUJj6t.jpg";
  el.style.width = `${step * i}px`;
  el_backyard.append(el);
}

// GROW
const grow = ev => {
  el_backyard.querySelectorAll('img').forEach(img => {
    img.style.width = `${img.offsetWidth + step}px`;
  });
}; 

el_backyard.addEventListener('click', grow);

#backyard > * {
  display: inline-block;
  vertical-align: middle;
  transition: width 0.3s;
  cursor: pointer;
}

<div id="backyard"></div>