Блог

Я пытался вывести изображения кошек в случайном порядке из верхнего массива. Мой click4pics не работает с отображаемым кодом, я получаю сообщение о том, что изображения не могут быть найдены, однако, когда я изменяю источник изображения, чтобы загрузить только одно изображение, функция также работает по правильному пути с этим?

 const cat$Images = [  { name: "C1", img: "C1.jpg", },  { name: "C2", img: "C2.jpg", },   { name: "C3", img: "C3.jpg", },   { name: "C4", img: "C4.jpg", }, ]   let PicturePairs = [  { name: "C1", img: "C1.jpg",   name: "C2", img: "C2.jpg", },  ]; console.log(PicturePairs) console.log(cat$Images)    function shuffle(array) {  let currentIndex = array.length,  randomIndex;    while(currentIndex != 0) {  randomIndex = Math.floor(Math.random() * currentIndex);  currentIndex--;    [array[currentIndex], array[randomIndex]] = [  array[randomIndex], array[currentIndex]  ];  } }   shuffle(cat$Images) shuffle(PicturePairs)   let clickImage = document.querySelector("#button") clickImage.addEventListener("click",click4pics)  function click4pics(i) {  let catpics=document.createElement("img")  catpics.src=`images/${cat$Images[i].img}`;  catpics.alt = cat$Images.src;  document.querySelector("#box").appendChild(catpics);  catpics.addEventListener("click", function(e) {  console.log(e.target.src);  }) }   click4pics(0) click4pics(1) click4pics(2) click4pics(3)  

Первым параметром любой функции, используемой в качестве обработчика событий, является само «событие». Итак, если вы добавите console.log(i) в начале функции «click4pics», а затем попытаетесь нажать кнопку, вы обнаружите, что он «i» является объектом события. Чтобы исправить это, вы можете использовать цикл вместо передачи параметра.

 function click4pics() {  for (let i = 0; i lt; cat$Images.length; i  ) {  let catpics = document.createElement("img")  catpics.src = `images/${cat$Images[i].img}`;  catpics.alt = cat$Images.src;  document.querySelector("#box").appendChild(catpics);  catpics.addEventListener("click", function (e) {  console.log(e.target.src);  })  } }  

Если вы хотите повторно генерировать случайные изображения каждый раз, когда нажимается кнопка, затем поместите весь логин в функцию «click4pics». И прежде чем восстанавливать элементы изображений, убедитесь, что вы сначала очистили поле»#».

 function shuffle(array) {  let currentIndex = array.length,  randomIndex;   while (currentIndex != 0) {   randomIndex = Math.floor(Math.random() * currentIndex);  currentIndex--;   [array[currentIndex], array[randomIndex]] = [  array[randomIndex], array[currentIndex]  ];  }   }   let clickImage = document.querySelector("#button")  clickImage.addEventListener("click", click4pics)   function click4pics() {  const cat$Images = [  { name: "C1", img: "C1.jpg", },  { name: "C2", img: "C2.jpg", },  { name: "C3", img: "C3.jpg", },  { name: "C4", img: "C4.jpg", },  ]   let PicturePairs = [  {  name: "C1", img: "C1.jpg",  name: "C2", img: "C2.jpg",  },  ];   shuffle(cat$Images)  shuffle(PicturePairs)   document.querySelector("#box").innerHTML = ''; // empty it each time   for (let i = 0; i lt; cat$Images.length; i  ) {  let catpics = document.createElement("img")  catpics.src = `images/${cat$Images[i].img}`;  catpics.alt = cat$Images.src;  document.querySelector("#box").appendChild(catpics);  catpics.addEventListener("click", function (e) {  console.log(e.target.src);  })  }  }   click4pics() 

 lt;div id="box"gt;lt;/divgt; lt;button id="button"gt;btnlt;/buttongt; 

Если у вас возникли проблемы с путями к изображениям, убедитесь, что у вас есть папка «изображения» на том же уровне, что и ваш Html-файл, и поместите изображения в нее.