onclick触发问题，以逐渐增加for循环中每个图像的大小

Question

我正在尝试在我的网页的head元素中编写一个脚本，在该脚本中，当单击任何一个循环图像时，一个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>

我想最初在head元素中创建一个HTMLCollection以获得所需的结果，但是在尝试该操作时无法获得任何输出。现在，我仍然将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>

Answer 2

在添加新图像之前，您需要重置innerHTML：

function growingPumpkins(e) {           
  document.getElementById("smashingPumpkins").innerHTML = ""; here<<<<<<<<<
        for (var i = 0; i < 10; i++) {           

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

        }

    }