Trying to get alt text to show when a user clicks on an image

Question

There's probably something very important I'm missing here, but I've been working on this code and I keep getting stuck with the same errors over and over again--I'm not sure what I'm doing wrong.

Here is my HTML

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Images to Text</title>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
  </head>
  <body>
    <h1>Some of my Favorite Animals.</h1>
        <h2>Capybara & Mantis Shrimp</h2>
        <div id='showAlt'>
            <img src="capybaraman.jpg" height="190" alt="A picture of a capybara in the arms of a man, showing that they are about the size of dogs but look comparable to guinea pigs.">
            <img src="capybaramonkey.jpg" width="300" alt="A picture of a capybara with monkeys petting and on top of the capybara.">
            <img src="capybarabird.png" width="300" alt="A picture of a capybara laying in the mud. There is also a bird sitting on top of them.">
            <img src="mantisshrimp.jpg" width="300" alt="A picture of a mantis shrimp with its' arms open, they are rainbow with large eyes. They have small wing-like structures coming from the sides of their bodies.">
            <img src="mantisbody.jpg" width="230" alt="A picture showing the mantis shrimp's body, it is long and looks like a lobster's tail with the same texture.">
            <img src="mantisclose.jpg" width="300" alt="A picture close up to a mantis shrimp's face, you can see their large eyes and their 'mouth'.">
        </div>
        <div id="clickToShow"></div>
        
        <script src="imagetotext.js"></script>
    </body>
</html>

Here is my JavaScript

let altText = document.getElementById('clickToShow');
let clicker = document.getElementById('showAlt');

for (let x = 0; x < document.images.length; x++) {
    altText[x].addEventListener('click', imageToText);
}

function imageToText() {
    let clickImage = this.alt;
    clicker.textContent = clickImage;
}

I was trying to add a for loop each time the user clicked the image, it shows its alt text but I keep getting errors saying that it cannot read property addEventListener of undefined imageToText. I thought it would be that the JS was too high up in the HTML since it is undefined, but even after moving my script tag down this is still happening. I also want to use the event listener tag--I haven't learned jQuery yet. Any help would be great! I'm feeling stuck with my code at the moment.

The `
` doesn’t have numeric properties, so what are you trying to do with `altText[x]`? — Sebastian Simon, Mar 21 '21 at 23:47
Use [event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple events — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target). See [the tag info](https://stackoverflow.com/tags/event-delegation/info) and [What is DOM Event delegation?](https://stackoverflow.com/q/1687296/4642212). — Sebastian Simon, Mar 21 '21 at 23:47
@SebastianSimon I mixed up altText[x] with clicker, I just changed it now to clicker[x]. But not much changed. I'm trying to have each image show their alt text when clicked on. — amy, Mar 21 '21 at 23:52
`clicker` _also_ doesn’t have numeric properties, so `clicker[x]` also doesn’t make sense. `document.images` has numeric properties, so does `clicker.children`. — Sebastian Simon, Mar 21 '21 at 23:54
@SebastianSimon Yes, that was my main problem, I'm pretty new to JS so I assumed since I added a id to a set of imgs it would make numerical sense. Adding a for loop for the imgs of the document works, but I didn't even know I could do this so easily — amy, Mar 22 '21 at 00:04

score 0 · Answer 1 · answered Mar 21 '21 at 23:48

I was trying to add a for loop each time the user clicked the image

Then add the event listener to each image - you're currently trying to add click listeners to altText[x], but altText is a single element, a <div> - it's not a collection.

You also probably don't want to clear the #showAlt div containing the images, since then they'll all disappear - did you want to add it to the other div?

for (const img of document.querySelectorAll('img')) {
  img.addEventListener('click', imageToText);
}
function imageToText() {
    altText.textContent = this.alt;
}

Yes, I mixed up my two Ids too, this makes a lot of sense for why it wasn't working. This adds an event listener to all images instead of just the div element--that was the problem! Thank you. My question seems silly now since how easily it was solved haha. — amy, Mar 21 '21 at 23:59

score 0 · Answer 2 · answered Mar 22 '21 at 00:05

here is the error

for (let x = 0; x < document.images.length; x++) {
    altText[x].addEventListener('click', imageToText);
}

you get altText from document.getElementById('clickToShow'); right?

inside , no array, that is why addEventListener couldn't read it

change it to:

for (let x = 0; x < document.images.length; x++) {
    clicker[x].addEventListener('click', imageToText);
}

and chang this to

function imageToText() {
    let clickImage = this.alt;
    altText.textContent = clickImage;
}

Trying to get alt text to show when a user clicks on an image

2 Answers2