Search code examples
javascripthtmlcsscustom-data-attribute

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


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>


Solution

  • 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)