Я пытаюсь добавить событие щелчка на свое изображение без успеха в Javascript

#javascript

Вопрос:

У меня есть массив изображений, которые отображаются при нажатии кнопки в случайном порядке. Я подтвердил, что все изображения доступны для кликабельности и что они отображают правильный источник изображения в консоли. Что я не могу сделать, так это создать событие при нажатии, которое предупреждает о появлении сообщения при нажатии на изображение. Когда я нажимаю изображение «A1», отображается предупреждение «Нет», поэтому я предполагаю, что проблема может заключаться в том, что строка изображения и фактическое изображение не связаны друг с другом?

 const images$front = [
      { name: "A1", img: "A1.png" }, 
      { name: "B1", img: "B1.png", },
      { name: "A2", img: "A2.png", },
      { name: "B2", img: "B2.png", }, 
      { name: "A3", img: "A3.png", },
      { name: "B3", img: "B3.png", }, 
      { name: "A4", img: "A4.png", },
      { name: "B4", img: "B4.png", },  
      ];
//Rear image
const images$rear=[
      { name: "z",  img: "z.png" , },
];

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(images$front)

function DisplayImage(i) {
  let CardImage = document.createElement('img');
  CardImage.src = `Images/${images$front[i].img}`
  CardImage.alt = CardImage.src;
  document.querySelector("#box").appendChild(CardImage);
  CardImage.addEventListener("click", function(e) {
    if (CardImage === "A1") {
      alert("Yes")
    } else {
      alert("No")
    }
    console.log(e.target.src)
  })
}

Спасибо

1. CardImage==="A1" всегда будет ложным, так CardImage как является ссылкой на an HTMLImageElement и является узлом элемента , а не строкой. Вы могли бы — возможно — попробовать: CardImage.getAttribute('src') === "A1.png" ? Кроме того, не могли бы вы добавить достаточно своего кода, чтобы мы могли воспроизвести вашу проблему? Похоже, вы не набираете DisplayImage() свой отправленный код.

2. Машинописный текст указывал бы, что a HTMLImageElement и a string никогда не могут быть равны

Ответ №1:

Ваше условие пытается приравнять объект к строке, CardImage-это HTMLImageЭлемент, который всегда будет ложным , вы можете добавить другое свойство «имя», а затем выполнить условие.

 function DisplayImage(i) {
  let CardImage = document.createElement('img');
  CardImage.src = `Images/${images$front[i].img}`
  CardImage.alt = CardImage.src;
  CardImage.name = images$front[i].name; //here is the change.
  document.querySelector("#box").appendChild(CardImage);
  CardImage.addEventListener("click", function(e) {
  if (CardImage.name === "A1") { //change here too.
     alert("Yes")
   } else {
    alert("No")
   }
   console.log(e.target.src)
})
}