Pass text inside a tag to another tag using forEach

Question

EDIT: I don't understand why this was marked as duplicated since the previously question didn't reply my issue. Yes, it is about passing using querySelector but how do I do this using forEach? Please revise this.

I'm trying to make a figcaption to be displayed according to its associated image. It's a photo gallery I took the code from this video.

This piece of code works as fine as is showed in the video:

document.querySelectorAll('.image-container img').forEach(image =>{
    image.onclick = () =>{
        document.querySelector('.popup-image').style.display = 'block';
        document.querySelector('.popup-image img').src = image.getAttribute('src');
    }
});

But when I try to use the code I created to pass the figcaption's text to the desired tag (see .finalCaption below), I got [HTML ObjectCollection] as string. This is the code that I tried and didn't work:

document.querySelector('.finalCaption').innerHTML = image.getElementsByClassName('caption');

This is the HTML code from where the tag text should've come from (it's several .images because it is a photo gallery):

<div class="image-container">
    <div class="image">
        <figure>
            <img src="image.jpg" alt="">
            <figcaption class="caption">Some figcaption text</figcaption>
        </figure>
    </div>
</div>

And this is where it should go when clicked (it should have been displayed as a popup image like in lightbox):

<div class="popup-image">
    <span>&times;</span>
    <figure>
        <img src="image.jpg" alt="">
        <figcaption class="finalCaption">Figcaption text go here</figcaption>
    </figure>
</div>

What am I missing? How can I use each image's figcaption to be displayed everytime it is clicked?

Thank you very much.

@mplungjan thank you for your answer. It seems it doesn't pass the `figcaption` into `.finalCaption` as mentioned. Do you know what am I missing? — Elena, Jan 08 '23 at 11:15
`const popup = document.querySelector('.popup-image'), popupImg = popup.querySelector('img'), figCaption = popup.querySelector('figcaption'); document.querySelector('.image-container').addEventListener('click', (e) => { const tgt = e.target.closest('figure'); if (!tgt) return; popupImg.src = tgt.querySelector('img').src; figCaption.innerHTML = tgt.querySelector('figcaption').innerHTML; popup.style.display = 'block'; });` — mplungjan, Jan 08 '23 at 11:20
Seems to work for me here: https://jsfiddle.net/mplungjan/rajk7q8u/ — mplungjan, Jan 08 '23 at 13:07

Jash1395 · Accepted Answer · 2023-01-08T12:26:51.790

-1

innerHTML takes a string, but getElementsByClassName returns an HTMLCollection. The engine attempts to turn this into a string and you get "[HTML ObjectCollection]".

What you want is the text value, not the element. Edit:

You don't need to use getElementsByClassname because you are passing in the element here .forEach(image =>{ You can get the element's text with .textContent

document.querySelector('.finalCaption').innerHTML = image.nextSibling.textContent

edited Jan 08 '23 at 12:26

answered Jan 08 '23 at 08:08

Jash1395

228
1
6

Thank you for your answer. `.finalCaption`'s text was replaced by a empty string. Perhaps it's because `.image` doesn't have text content? How can I pass `figcaption` through it? – Elena Jan 08 '23 at 11:08
@Elena try `image.nextSibling.textContent`, it should access the figcaption if it is next to the img tag – Jash1395 Jan 08 '23 at 12:27
YES! That's it! It worked! I had to use `nextSibling` twice since `figcaption` is inside `figure` too. Thank you thank you so much!! – Elena Jan 08 '23 at 13:26

Pass text inside a tag to another tag using forEach

1 Answers1