data attribute

PHOTO

Fri Nov 01 2024 13:57:34 GMT+0000 (Coordinated Universal Time)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Data Attribute Example</title>
    <style>
        .item { cursor: pointer; margin: 10px 0; }
    </style>
</head>
<body>
    <h2>Product List</h2>
    <div class="item" data-description="A fresh apple from the orchard" onclick="showDetails(this)">Apple</div>
    <div class="item" data-description="A ripe, sweet banana" onclick="showDetails(this)">Banana</div>
    <div class="item" data-description="A juicy bunch of grapes" onclick="showDetails(this)">Grapes</div>

    <h3>Details:</h3>
    <p id="details"></p>

    <script>
        function showDetails(element) {
            const description = element.getAttribute("data-description");
            document.getElementById("details").textContent = description;
        }
    </script>
</body>
</html>

COPY