如何获取 Javascript 中第一个子元素的值？

Question

I'm trying to get the value of the first child element from my HTML to show whenever I click on an image aka my 'services-cell" container, but it keeps saying the value is undefined.

    <div class="services-cell">
        <img class="services-cell_img" src="gallery/img-1.jpg" alt="">
        <div class="services-cell_text">Digital Marketing</div>
    </div>

Here is my Javascript

let galleryImages = document.querySelectorAll('.services-cell')


if(galleryImages) {
galleryImages.forEach(function(image){
    image.onclick = function() {
        console.log(galleryImages.firstElementChild.value)
    }
})
}

I tried to add the img class as a variable as well, but it also says undefined. I want the console.log to print

 <img class="services-cell_img" src="gallery/img-1.jpg" alt="">

I have multiple images with the same html except it just say img-2, img-3 etc. So ideally whenever I click on the other images it would print the same HTML value but just will say the image number that I clicked on

Answer 1

You created the array as galleryImages , but then rather than accessing the firstElementChild of the div , you're trying to access that property on the array. You need to do image.firstElementChild instead. Also, as far as I know, accessing .value of an image has no meaning, I think you meant to just do firstElementChild instead:

 let galleryImages = document.querySelectorAll('.services-cell'); if (galleryImages) { galleryImages.forEach(function (image) { image.onclick = function() { console.log(image.firstElementChild); }; }); }

 <div class="services-cell"> <img class="services-cell_img" src="https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/deciduous-tree.png" alt=""> <div class="services-cell_text">Digital Marketing</div> </div> <div class="services-cell"> <img class="services-cell_img" src="https://cdn-cloudfront.cfauthx.com/binaries/content/gallery/gg-en-us/icons/gg-tree-icon.png" alt=""> <div class="services-cell_text">Digital Marketing</div> </div>

Answer 2

What you could do to achieve this is passing the event attribute as a parameter of the onclick function. The event attribute has a target; which is the item that triggered the event. So for example:

if(galleryImages) {
galleryImages.forEach(function(image){
    image.onclick = function(e) {
        console.log(e.target.firstElementChild.value)
    }
})
}

However instead of adding an eventListener to every element, it might be better to add one event handler on the parent - and check which item is clicked. Eg

<div class="parent">
    <div class="services-cell">
        <img class="services-cell_img" src="gallery/img-1.jpg" alt="" />
        <div class="services-cell_text">Digital Marketing</div>
    </div>
    <div class="services-cell">
        <img class="services-cell_img" src="gallery/img-2.jpg" alt="" />
        <div class="services-cell_text">Digital Marketing</div>
    </div>
</div>

And the javascript:

 document.querySelector('.parent').addEventListener('click', function(e){
    if(e.target.matches('.services-cell'){
        // Do  something with the e.target - which is the .services.cell
    }
}