CODEWITHSUNDEEP
javascripthtmlimage
guywhogames
guywhogames

Reputation: 41

Clickable Images HTML

I am trying to make a page that displays images and then alerts text when an image is clicked. I have my images in a list, and Im trying to do this with an event listener and queryselectorall but I cant get anything to work EDIT: The text will be different for each picture clicked

let node = document.querySelectorAll("#images");
node.addEventListener('click', () => {
  alert("This mountainside is located in Romania");
})
<div id="images">
  <img src="https://www.dvd-ppt-slideshow.com/blog/wp-content/uploads/2010/07/natural-scenery-7.jpg" />
  <img src="https://i.ytimg.com/vi/zoozFV6SEvU/maxresdefault.jpg" />
  <img src="https://picjumbo.com/wp-content/uploads/lake-shore-and-forests-scenery-in-romania_free_stock_photos_picjumbo_dsc00083-1570x1047.jpg" />
</div>

Upvotes: 0

Views: 151

Answers (3)

code0789
code0789

Reputation: 43

Quick Solution : Since, you want same message to be displayed onclick - I have added eventListener to the document.

document.addEventListener("click", function(){
      alert("This mountainside is located in Romania");
 })

Upvotes: 0

Hassaan Ali
Hassaan Ali

Reputation: 1061

Try to keep things simple. Here's the running demo code for you. 

<!DOCTYPE html>
<html>

<body>
  <div id="images" onclick="myFunction()">
    <img src="https://www.dvd-ppt-slideshow.com/blog/wp-content/uploads/2010/07/natural-scenery-7.jpg" />
    <img src="https://i.ytimg.com/vi/zoozFV6SEvU/maxresdefault.jpg" />
    <img src="https://picjumbo.com/wp-content/uploads/lake-shore-and-forests-scenery-in-romania_free_stock_photos_picjumbo_dsc00083-1570x1047.jpg" />

  </div>
</body>
<script>
  function myFunction() {
    alert("I am an alert box!");
  }
</script>

</html>

Upvotes: 2

j08691
j08691

Reputation: 207861

Simple solution would be to use querySelector instead of querySelectorAll. The former returns a single element, in your case the div, while the latter returns a collection, and you can't assign an event handler to a collection that way. You're able to assign the click event handler to the div instead of the images because the clicks on the images will bubble up the DOM and trigger the click event bound to the div.

let node = document.querySelector("#images");
node.addEventListener('click', () => {
  alert("This mountainside is located in Romania");
})
<div id="images">
  <img src="https://www.dvd-ppt-slideshow.com/blog/wp-content/uploads/2010/07/natural-scenery-7.jpg" />
  <img src="https://i.ytimg.com/vi/zoozFV6SEvU/maxresdefault.jpg" />
  <img src="https://picjumbo.com/wp-content/uploads/lake-shore-and-forests-scenery-in-romania_free_stock_photos_picjumbo_dsc00083-1570x1047.jpg" />
</div>

If you need to get something specific for each image, then assign the click event to them instead of the div via:

const images = document.querySelectorAll("#images > img")
for (const image of images) {
  image.addEventListener('click', function(event) {
    alert(this.src);
  })
}
<div id="images">
  <img src="https://www.dvd-ppt-slideshow.com/blog/wp-content/uploads/2010/07/natural-scenery-7.jpg" />
  <img src="https://i.ytimg.com/vi/zoozFV6SEvU/maxresdefault.jpg" />
  <img src="https://picjumbo.com/wp-content/uploads/lake-shore-and-forests-scenery-in-romania_free_stock_photos_picjumbo_dsc00083-1570x1047.jpg" />
</div>

Upvotes: 1

Related Questions