How to get specific Div's/Card Details when user clicked that using javascript-CodePudding

I am creating various cards using fetch API, this cards are holding details like (Author, Title, Cover Image, etc.).

There is a lot of cards renders there once API call my struggle is how to get specific card data/details like ( author, title etc.) of clicked card. when user clicked any of the card from these set.

HTML

        <div  id="ShowReports">
        <div  onclick="show(this)" id="card">
            <div >
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                     width="150" height="200">
                <h6 >${title1}</h6>
                <p  name="author">Author : ${author1}</p>
                <p  name="pages">Pages : ${pages1}</p>
                <a href="${downloadLinks}" >Download1</a>
            </div>
        </div>
        <div  onclick="show(this)" id="card">
            <div >
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                     width="150" height="200">
                <h6 >${title2}</h6>
                <p  name="author">Author : ${author2}</p>
                <p  name="pages">Pages : ${pages2}</p>
                <a href="${downloadLinks}" >Download2</a>
            </div>
        </div>
    </div>

javaScript

function show() {
var details = this.innerHTML
console.log(details)

}

Don't know what is the right approach or method to this...

CodePudding user response：

UPDATED

We need to assign unique id to data elements. For example: id="${id}-author". Note that id is from your card id

<div  onclick="show(${id})" id="card">
            <div >
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                     width="150" height="200">
                <h6  id="${id}-booktitle">${title1}</h6>
                <p  name="author" id="${id}-author">Author : ${author1}</p>
                <p  name="pages" id="${id}-pages">Pages : ${pages1}</p>
                <a href="${downloadLinks}" >Download1</a>
            </div>
</div>

After that, we can implement show function like below

function show(id) {
   const author = document.getElementById(id   "-author").innerHTML;
   const booktitle = document.getElementById(id   "-booktitle").innerHTML;
   const pages = document.getElementById(id   "-pages").innerHTML;
   console.log({ author, booktitle, pages })
}

If you don't want to modify HTML, you also can try this way

onclick="show({ author: ${author}, booktitle: ${booktitle}, pages: ${pages} })"

And you need to have params corresponding to your data name

function show({ author, booktitle, pages }) {
   console.log({ author, booktitle, pages })
}

OLD ANSWER

onclick="show(this)"

this in this context is referred to the global one, but from my understanding of your question, you're trying to get scoped context, so the change could be

onclick="show(event)"

To access the innerHTML from that click, you can try this way

function show(event) { //the param needs to be passed properly
   var currentElement = event.target || event.srcElement;
   var details = currentElement.innerHTML
   console.log(details)
}

P/s: If you want to keep the global context on this, you also need to pass the param on show function.

CodePudding user response：

@ Nick Vu thanks for your comment your approach is quite logical and great well what i have did is, I have assigned a unique id to every card div while calling API and then target its childnode's innerHTMLS.

HTML

 <div  id="card">
            <div  id="second" onclick="show(id)">
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                     width="150" height="200">
                <h6 >${title2}</h6>
                <p  name="author">Author : ${author2}</p>
                <p  name="pages">Pages : ${pages2}</p>
                <a href="${downloadLinks}" >Download2</a>
            </div>
        </div>
    </div>

javascript

function show(e) {
console.log(e)
var details = document.getElementById(e)
console.log(details)
console.log(details.childNodes[1].src)
console.log(details.childNodes[3].innerHTML)
console.log(details.childNodes[5].innerHTML)
console.log(details.childNodes[7].innerHTML)

}

this is working around what i want as output.. thanks. Or may be at last i can do forEach loop of childnodes to make it more short.