Is there a method to implement through data attributes in JavaScript?

Question

I want implement the card content in the card when expanded, I have used the help of JavaScript to implement the title, image, description ,I have used 'data-title' and 'data-type' for displaying title and image respectively which are by the working fine and when I try to implement card description by using data-desc attribute , it is displaying 'undefined'.

Anyone please help me with my code. My code link: https://codepen.io/Avatar_73/pen/ExyNdMK

        const getCardContent = (title, type, desc) => {
            return `
                <div class="card-content">
                    <h2>${title}</h2>
                    <img src="./assets/${type}.png" alt="${title}">
                    <p>${desc}</p>
                </div>
            `;
        }

    <div class="cards">
        <div class="card" data-type="html" data-desc="I am HTML">
            <h2>HTML5</h2>
        </div>
   </div>

Add the relevant part of you code to your question. See how to create minimal reproducible example. — PM 77-1
– PM 77-1, Commented Oct 23, 2020 at 1:39
Yes, I have updated the specific blocks of the code, Can you please look into it now? Thanks... and if you want to run the code and check, go with Codepen link. — user14496542
– user14496542, Commented Oct 23, 2020 at 2:12

chrisbyte · Accepted Answer · 2020-10-23 02:17:56Z

1

On line 115, you forgot to pass the desc to your getCardContent function

Change to:

const content = getCardContent(card.textContent, card.dataset.type, card.dataset.desc)

answered Oct 23, 2020 at 2:17

chrisbyte

1,6333 gold badges17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user14496542 Over a year ago

Thank you so much! I don't know how I missed that.

sandeep joshi · Accepted Answer · 2020-10-23 02:20:08Z

0

Change your calling method signature from

 getCardContent(card.textContent, card.dataset.type)

to

getCardContent(card.textContent, card.dataset.type, card.dataset.desc)

you are not passing the third parameter(card.dataset.desc) in the method thus it is rendering the value as undefined.

answered Oct 23, 2020 at 2:20

sandeep joshi

2,1891 gold badge10 silver badges14 bronze badges

1 Comment

user14496542 Over a year ago

Oh Thank you so much! I don't know how I missed that.

Collectives™ on Stack Overflow

Is there a method to implement through data attributes in JavaScript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related