CODEWITHSUNDEEP
javascripthtmlcard
Kuldeep Singh
Kuldeep Singh

Reputation: 79

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

enter image description hereI 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 class="row" id="ShowReports">
        <div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(this)" id="card">
            <div class="card p-1">
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                    class="bookimg" width="150" height="200">
                <h6 class="mb-3 booktitle">${title1}</h6>
                <p class="mb-0 bookpara" name="author">Author : ${author1}</p>
                <p class="mb-3 bookpara" name="pages">Pages : ${pages1}</p>
                <a href="${downloadLinks}" class="reportbtn">Download1</a>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(this)" id="card">
            <div class="card p-1">
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                    class="bookimg" width="150" height="200">
                <h6 class="mb-3 booktitle">${title2}</h6>
                <p class="mb-0 bookpara" name="author">Author : ${author2}</p>
                <p class="mb-3 bookpara" name="pages">Pages : ${pages2}</p>
                <a href="${downloadLinks}" class="reportbtn">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...

Upvotes: 0

Views: 2634

Answers (2)

Kuldeep Singh
Kuldeep Singh

Reputation: 79

@ 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 class="col-lg-3 col-md-4 col-sm-6 mt-3" id="card">
            <div class="card p-1" id="second" onclick="show(id)">
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                    class="bookimg" width="150" height="200">
                <h6 class="mb-3 booktitle">${title2}</h6>
                <p class="mb-0 bookpara" name="author">Author : ${author2}</p>
                <p class="mb-3 bookpara" name="pages">Pages : ${pages2}</p>
                <a href="${downloadLinks}" class="reportbtn">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.

Upvotes: 1

Nick Vu
Nick Vu

Reputation: 15540

UPDATED

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

<div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(${id})" id="card">
            <div class="card p-1">
                <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
                    class="bookimg" width="150" height="200">
                <h6 class="mb-3 booktitle" id="${id}-booktitle">${title1}</h6>
                <p class="mb-0 bookpara" name="author" id="${id}-author">Author : ${author1}</p>
                <p class="mb-3 bookpara" name="pages" id="${id}-pages">Pages : ${pages1}</p>
                <a href="${downloadLinks}" class="reportbtn">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.

Upvotes: 3

Related Questions