javscript onclick（）替换图像

Question

[我尝试创建奖励卡，基本上我有一个具有10张具有相同ID的图像的div，我想要实现的是，每当用户单击按钮时，div中的图像将被新图像替换。

到目前为止，使用下面的代码，我只获得了替换的第一张图片，然后停止了，什么也没有发生

    <div class="container">
    <h1>Reward Program</h1>
    <div class="section" id="card">
      <div class="row">
         <div class="col-lg-4 col-sm-3" id="tut">
         <img src="images/mail.png" id="stamp" alt="">
         </div>
         <div class="col-lg-4 col-sm-3">
         <img src="images/mail.png" id="stamp" alt="">
         </div>
         <div class="col-lg-4 col-sm-3">
         <img src="images/mail.png" id="stamp">
         </div>
         <div class="col-lg-4 col-sm-3">
         <img src="images/mail.png" id="stamp">
         </div>
         <div class="col-lg-4 col-sm-3">
         <img src="images/mail.png" id="stamp">
         </div>
         <div class="col-lg-4 col-sm-3">
         <img src="images/mail.png" id="stamp">
         </div>
         <div class="col-lg-4 col-sm-3">
         <img src="images/mail.png" id="stamp">
         </div>
         <div class="col-lg-4 col-sm-3">
         <img src="images/mail.png" id="stamp">
         </div>
         <div class="col-lg-4 col-sm-3">
         <img src="images/mail.png" id="stamp">
         </div>
         <div class="col-lg-4 col-sm-3">
         <img src="images/mail.png" id="stamp">
         </div>
      </div>

      </div>
  </div>

  <button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>

var counter = 0,
checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];


showCheck = function  () {


  document.getElementById("stamp").src = checked[counter];
  counter++;

  if (counter >= checked.length) {
    counter = 0;
  }


};

Answer 1

您在网站上只能有一个元素ID（每个ID必须是唯一的，否则会出现错误），因此最好将这些ID更改为类。然后，您可以选择所有类并遍历所有类并更改所需的内容。运行代码片段以查看其工作原理：

let counter = 0;
const checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];

function showCheck() {
  const imges = document.querySelectorAll(".stamp")
  imges.forEach(img => {
    img.src = checked[counter]
    img.alt = checked[counter]
    counter++
  })
  if (counter >= checked.length) {
    counter = 0;
  }
};

<div class="row">
   <div class="col-lg-4 col-sm-3" id="tut">
      <img src="images/mail.png" alt="mail" class="stamp" alt="">
   </div>
   <div class="col-lg-4 col-sm-3">
      <img src="images/mail.png" alt="mail" class="stamp" alt="">
   </div>
   <div class="col-lg-4 col-sm-3">
      <img src="images/mail.png" alt="mail" class="stamp">
   </div>
   <div class="col-lg-4 col-sm-3">
      <img src="images/mail.png" alt="mail" class="stamp">
   </div>
   <div class="col-lg-4 col-sm-3">
      <img src="images/mail.png" alt="mail" class="stamp">
   </div>
   <div class="col-lg-4 col-sm-3">
      <img src="images/mail.png" alt="mail" class="stamp">
   </div>
   <div class="col-lg-4 col-sm-3">
      <img src="images/mail.png" alt="mail" class="stamp">
   </div>
   <div class="col-lg-4 col-sm-3">
      <img src="images/mail.png" alt="mail" class="stamp">
   </div>
   <div class="col-lg-4 col-sm-3">
      <img src="images/mail.png" alt="mail" class="stamp">
   </div>
   <div class="col-lg-4 col-sm-3">
      <img src="images/mail.png" alt="mail" class="stamp">
   </div>
</div>

<button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>

Answer 2

document.getElementById

返回一个元素，而不是元素的集合。 id's should belong to a single element。因此，您只会更改使用该ID找到的第一个元素。

首先要使用来获取元素数组

document.getElementsByClassName("col-lg-4 col-sm-3")