CODEWITHSUNDEEP
javascripthtmleventsparent-childaddeventlistener
Valortome
Valortome

Reputation: 7

If I have an event listener on an HTML element, how do I get the value of the child element that I clicked on when there are multiple children

I would like to preface this by saying I am quite new to Javascript.

I am trying to make a website that has multiple journal entries that each have a title and description. I have an event listener on a section tag that contains all of the entries, and then article tags within which have a value associated with them and contain the individual entries. I want to be able to click a specific entry and get the value of the article tag for the clicked entry.

So far all the methods I have tried have given a value of null.

Here is the relevant HTML code

<div id="displayById"></div>
<section id="timeline" class ="grid">

<!--   entries cards for  testing layout  -->
<article value = "1">
    <p class="entryDate">20.09.2021</p>
    <h3 class="entryTitle">Entry 1 Title</h3> 
    <img  class="entryImg" src="https://picsum.photos/100" alt="">
    <div class="entryDescription">Lorem ipsum lorem ipsum</div>

</article>
<article value = "2">
    <h3 class="entryTitle">Entry 2 Title</h3>
    <img  class="entryImg" src="https://picsum.photos/100" alt="">
    <div class="entryDescription">Lorem ipsum lorem ipsum</div>
</article>    
</section>

And here is the Javascript where the event listener and subsequent function is

const selectEntry = document.getElementById('timeline')
selectEntry.addEventListener('click', entryById)

function entryById(e) {
    try {
        e.preventDefault()
        let id = e.target.closest('article').value
        console.log(id)
        document.getElementById('timeline').style.display="none"
        fetch(`http://localhost:3000/entry/${id}`)
        .then( r => r.json())
        .then( data => {
            console.log(data)
            let entry = `<article class="card" value = ${id}>
            <h3 class="entryTitle">${data['title']}</h3>
            <img  class="entryImg" src="" alt="">
            <div class="entryDescription">${data['description']}</div>
        </article>`
        document.getElementById('displayById').insertAdjacentElement('beforeend', entry)
        })
    }
    catch (error) {
        console.log(error);

    }
}

I have tried using forEach to add an event listener for each article but I couldn't get that to work. My most recent attempt is using

let id = e.target.closest('article').value

to select the closest article and get the value, but this makes id equal to null. If anyone knows what I am doing wrong or a better method to do this I would be very grateful.

Upvotes: 0

Views: 833

Answers (2)

AdamJ
AdamJ

Reputation: 184

I would attach the event listener to the articles themselves rather than trying to drill down from the section and identify which article was clicked. Maybe you weren't working with an array when you tried attaching event listeners to the articles?

const articles = document.querySelectorAll('#timeline article');
Array.from(articles).forEach( article => {
    article.addEventListener('click', () => {
        // do something
    });
});

Upvotes: 0

Coffezilla
Coffezilla

Reputation: 386

You should use datasetinstead of value as attribute. With data set you could do something like data-value=999 and get the value in javascript using 'element.dataset.value'

Upvotes: 2

Related Questions