JavaScript - How to show image ALT text on a div?

Question

I'm trying to show the alt text of images on the #show div. I want to click an image and show its alt in #show , click another image and show its alt and like that. How can i make it work?

<div id="IMGS">
    <h2>1</h2>
    <div><img src="img/frog.jpg" alt="this is a frog" height="100" /><p>0</p></div>
    <div><img src="img/bird.jpg" alt="this is a bird" height="100" /><p>0</p></div>
    <div><img src="img/Photoshop-01.jpg" alt="this ain't real" height="100" /><p>0</p></div>
    <div id="show"></div>
</div>

Answer 1

You can get all images with .querySelectorAll() and attach click handlers on them as follows:

 var images = document.querySelectorAll('#IMGS img'); var elem = document.getElementById('show'); images.forEach(function(image) { image.addEventListener('click', function() { elem.innerHTML = image.getAttribute('alt'); }); }); 

 <div id="IMGS"> <h2>1</h2> <div><img src="img/frog.jpg" alt="this is a frog" height="100" class="img" /><p>0</p></div> <div><img src="img/bird.jpg" alt="this is a bird" height="100" class="img" /><p>0</p></div> <div><img src="img/Photoshop-01.jpg" alt="this ain't real" height="100" /><p>0</p></div> <div id="show"></div> </div> 

Answer 2

If you look at the console you will see that your code throws an error:

imgs[Symbol.iterator] is not a function

While NodeLists are theoretically iterable, no browser implements that yet afaik. Convert the list to an array first, then it will work:

for (let img of Array.from(imgs)) {
  // ...
}

 let show = document.getElementById('show'); let imgs = document.querySelectorAll('img'); for (let img of Array.from(imgs)) { img.addEventListener('click', function() { show.innerText = img.alt }); } 

 <div id="IMGS"> <h2>1</h2> <div> <img src="img/frog.jpg" alt="this is a frog" height="100" /> <p>0</p> </div> <div> <img src="img/bird.jpg" alt="this is a bird" height="100" /> <p>0</p> </div> <div> <img src="img/Photoshop-01.jpg" alt="this ain't real" height="100" /> <p>0</p> </div> <div id="show"></div> </div> 

Notes

• The standard property to set the text content is textContent . innerText is actually IE.
• for...of and let are a relatively new constructs that are not supported by every (especially older) browsers.

There is no need for them though. You can access the clicked element via this inside the event handler, which eliminates the need for a block scoped variable. for...of can be replaced by .forEach :

 var show = document.getElementById('show');
 var imgs = document.querySelectorAll('img');
 var handler = function() { show.textContent = this.alt; };
 Array.from(imgs).forEach(function(img) { img.addEventListener('click', handler); });

or make use of event delegation:

var show = document.getElementById('show');
var imgs = document.getElementById('IMGS');
imgs.addEventListener('click', function(event) {
  if (event.target.nodeName.toLowerCase() === 'img') {
     show.textContent = event.target.alt;
  }
});

Answer 3

In this code, you add an event listener for each image:

var myImage = document.getElementsByTagName("img");
var text = document.getElementById("show");

for (var i = 0; i < myImage.length; i++) {
    myImage[i].addEventListener('click',show);
}

function show(){
    var myAlt = this.alt;
    text.innerHTML = myAlt;
}

Check the working fiddle: https://jsfiddle.net/gerardofurtado/2bkkr6g6/3/

Answer 4

The easiest way to achieve that is through jQuery.

Here's the code you need:

var imgs = $("#IMGS img");
var show = $("#show");

imgs.on("click", function() {
show.html(this.alt);
})

Answer 5

Add a class for image (just a dummy one)

<div id="IMGS">
        <h2>1</h2>
        <div><img src="img/frog.jpg" alt="this is a frog" height="100" class="img" /><p>0</p></div>
        <div><img src="img/bird.jpg" alt="this is a bird" height="100" class="img" /><p>0</p></div>
        <div><img src="img/Photoshop-01.jpg" alt="this ain't real" height="100" /><p>0</p></div>
        <div id="show"></div>
    </div>

JavaScript

$(".img").click(function () {
      $("#show").html(  $(this).attr('alt'))  );
 })