How do I make it so that when I click an image element, it will add an alert showing the .title, .artist, .album, and .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() .

Instead, put your alert() inside of a function to prevent the alert() from being called multiple times like so:

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:

 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}`); // }; //}

How do I make it so that when I click an image element, it will add an alert showing the .title, .artist, .album, and .year?

Question

1 answers

solution1
0 2019-05-23 04:10:10

How do I make it so that when I click an image element, it will add an alert showing the .title, .artist, .album, and .year?

Question

1 answers

solution1 0 2019-05-23 04:10:10

solution1
0 2019-05-23 04:10:10