我该如何做才能在单击图像元素时添加显示.title，.artist，.album和.year的警报？

Question

I just want to be able to click the image and then an alert comes up showing the title, artist, album, and year. 我只希望能够单击该图像，然后出现一个警报，显示标题，艺术家，专辑和年份。 I'm rather confused on how to do this outside of the loop. 我对如何在循环外执行此操作感到困惑。 Here is the code I have now 这是我现在的代码

<html>
  <body>
  Assignment 5
    <script>
    let songs = [
  {
    title: "Getting Away with It (All Messed Up)",
    artist: "James",
    album: "Pleased to Meet You",
    year: 2001,
    art: "https://upload.wikimedia.org/wikipedia/en/2/2a/JamesPleasedToMeetYou.jpg"
  },
  {
    title: "Renaissance Affair",
    artist: "Hooverphonic",
    album: "Blue Wonder Power Milk",
    year: 1998,
    art: "https://upload.wikimedia.org/wikipedia/en/1/17/Hooverphonic-Blue_Wonder_Power_Milk.jpg"
  },
  {
    title: "White Nights",
    artist: "Oh Land",
    album: "Oh Land",
    year: 2011,
    art: "https://upload.wikimedia.org/wikipedia/en/6/68/Oh_Land_%28album%29.png"
  }
  ];
    for(let i = 0; i < songs.length;i++){
      console.log(songs[i].title);
      let myTitle = document.createElement('div');
      myTitle.innerText = songs[i].title;
      document.body.appendChild(myTitle);
      let myImage = document.createElement('img');
      myImage.src = songs[i].art;
      document.body.appendChild(myImage)
      myImage.onclick = alert('myImage.title')
    }

    </script>
  </body>
</html>

Answer 1

You were calling alert() on every iteration as it was not enclosed within a function, therefore, onclick was assigned to the value returned by alert() . 您在每次迭代中都调用alert() ，因为它没有包含在函数中，因此， onclick被分配给alert()返回的值。

Instead, put your alert() inside of a function to prevent the alert() from being called multiple times like so: 相反，请将您的alert()放在函数内部，以防止多次调用alert() ，如下所示：

myImage.onclick = function(){alert(JSON.stringify(songs[i], null, 2))};
// ES6 syntax 
myImage.onclick = ()=>alert(JSON.stringify(songs[i], null, 2));

Here is your snippet with a alert() that is called on every image click: 这是您的片段，其中包含每次单击图像时都会调用的alert() ：

 let songs = [{ title: "Getting Away with It (All Messed Up)", artist: "James", album: "Pleased to Meet You", year: 2001, art: "https://upload.wikimedia.org/wikipedia/en/2/2a/JamesPleasedToMeetYou.jpg" }, { title: "Renaissance Affair", artist: "Hooverphonic", album: "Blue Wonder Power Milk", year: 1998, art: "https://upload.wikimedia.org/wikipedia/en/1/17/Hooverphonic-Blue_Wonder_Power_Milk.jpg" }, { title: "White Nights", artist: "Oh Land", album: "Oh Land", year: 2011, art: "https://upload.wikimedia.org/wikipedia/en/6/68/Oh_Land_%28album%29.png" } ]; // ES6 syntax songs.forEach(song => { let myTitle = document.createElement('div'); myTitle.innerText = song.title; document.body.appendChild(myTitle); let myImage = document.createElement('img'); myImage.src = song.art; document.body.appendChild(myImage) myImage.onclick = () => alert(`Title: ${song.title} Artist: ${song.artist} Album: ${song.album} Year: ${song.year}`); }); // The commented code below also works //for (let i = 0; i < songs.length; i++) { // let myTitle = document.createElement('div'); // myTitle.innerText = songs[i].title; // document.body.appendChild(myTitle); // let myImage = document.createElement('img'); // myImage.src = songs[i].art; // document.body.appendChild(myImage) // myImage.onclick = function(){ //alert(`Title: ${song.title} //Artist: ${song.artist} //Album: ${song.album} //Year: ${song.year}`); // }; //}

我该如何做才能在单击图像元素时添加显示.title，.artist，.album和.year的警报？

问题描述

1 个解决方案

解决方案1
0 2019-05-23 04:10:10

我该如何做才能在单击图像元素时添加显示.title，.artist，.album和.year的警报？

问题描述

1 个解决方案

解决方案1 0 2019-05-23 04:10:10

解决方案1
0 2019-05-23 04:10:10