如何在 JavaScript onclick 上显示不同的图像并在第 3 次或第 4 次单击时显示相同的图像答案

【问题标题】：How to show different image on JavaScript onclick and display the same image on 3rd or 4th click如何在 JavaScript onclick 上显示不同的图像并在第 3 次或第 4 次单击时显示相同的图像
【发布时间】：2020-08-20 10:11:49
【问题描述】：

window.onload = choosePic;
var myPix = new Array("img1.jpg", "img2.jpg", "img3.jpg");

function choosePic() {
  var randomNum = Math.floor(Math.random() * myPix.length);
  document.getElementById("myPicture").src = myPix[randomNum];
  document.getElementById("myPicture2").src = myPix[randomNum];
  document.getElementById("myPicture3").src = myPix[randomNum];
}

<img src="img.jpg" width="100" height="100" id="myPicture" alt="some image" />
<img src="img.jpg" width="100" height="100" id="myPicture2" alt="some image" />
<img src="img.jpg" width="100" height="100" id="myPicture3" alt="some image" />
<button id="btn" onclick="choosePic()">Click Hear</button>

我想从数组中显示 3 个不同的图像。并在第 4 次或第 5 次单击想要显示相同的图片。

【问题讨论】：

same pic 表示前 3 个中的哪一个？
有时应该显示 img1.jpg，有时是 img2.jpg，有时是 img3.jpg @brk

标签： javascript arrays image button random

【解决方案1】：

这样的？

// gather all <img> elements on page
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length;

// the "Click Here" button
const btn = document.getElementById('btn');

// array of randomly generated image URLs
let imgUrls = [];
let urlsLength;

// number of button clicks
let clickCount;

// initialize the page
function initialize() {
  clickCount = 0;

  // form array of random image urls from 'picsum.photos'
  const randomIndex = Math.floor(Math.random() * 100);
  for (let i = 0; i < imgCount * 4; i++) {
    imgUrls.push(
      `https://picsum.photos/id/${randomIndex+i}/100`);
  }
  urlsLength = imgUrls.length;

  // hide all <img> elements
  imgs.forEach(img => {
    img.src = "#";
    img.style.opacity = "0";
  });

  // enable the "Click Here" button
  btn.disabled = false;
}

// handle "Click Here" button
function buttonClick() {
  const iUrlRand = Math.floor(Math.random() * urlsLength);

  if (++clickCount < 4) {
    // show 3 random images
    for (let j = 0; j < imgCount; j++) {
      const iImg = (iUrlRand + j) % urlsLength;
      imgs[j].src = imgUrls[iImg];
      imgs[j].style.opacity = "1";
    }
  } else if (clickCount < 6) {
    // show 1 random image, duplicated in 3 elements
    imgs[0].src = imgUrls[iUrlRand];
    for (let j = 0; j < imgCount; j++) {
      imgs[j].src = imgUrls[iUrlRand];
    }
  }

  if (clickCount === 5) {
    // disable button to prevent more than 5 clicks
    btn.disabled = true;
  }
}

window.onload = initialize;

<body style="background-color: #aaa">
  <img src="" width="100" height="100" alt="img 0" />
  <img src="" width="100" height="100" alt="img 1" />
  <img src="" width="100" height="100" alt="img 2" /><br/>
  <button id="btn" onclick="buttonClick()">Click Here</button>
  <button onclick="initialize()">Reset</button>
</body>

【讨论】：

应该在 4 次点击前显示随机图片。在 4 或 5 上单击有时应该显示 img1.jpg，有时是 img2.jpg，有时是 img3.jpg
在第 4 次点击中没有显示相同的 3 图像。它只显示 1 张图片。 @terrymorse
@SharwarAmanSymon 没错，第三次点击后，它会在 1 个图像元素中显示 1 个图像。您是否希望它在 3 个单独的图像元素中显示相同的图像？一个简单的改变，完成。
非常感谢。 @terrymorse