我該如何做才能在單擊圖像元素時添加顯示.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