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

Question

我只希望能够单击该图像，然后出现一个警报，显示标题，艺术家，专辑和年份。 我对如何在循环外执行此操作感到困惑。 这是我现在的代码

<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

您在每次迭代中都调用alert() ，因为它没有包含在函数中，因此， onclick被分配给alert()返回的值。

相反，请将您的alert()放在函数内部，以防止多次调用alert() ，如下所示：

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

这是您的片段，其中包含每次单击图像时都会调用的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