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 个答案: