Как показать другое изображение при JavaScript onclick и отобразить то же изображение при 3-м или 4-м клике - PullRequest
0 голосов
/ 05 мая 2020

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];
}
image

Я хочу показать 3 разных изображения из массива. и на 4-м или 5-м щелчке вы хотите показать тот же pi c.

1 Ответ

1 голос
/ 05 мая 2020

Что-то вроде этого?

// 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;
image
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...