I was given a task to create un ordered list and li items from an array such that when clicked on the item it will print the text value in the console. So, here is my solution.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Testing</h1>
    <div id="abcd">Hello</div>
    <script>
            (function(){
             let entry = document.querySelector("#abcd")
             let ulitem = document.createElement("ul")
             const arr = ['a', 'b', 'c', 'd']
             arr.forEach(i => {
                 const li = document.createElement("li")
                 li.innerHTML = i
                 li.addEventListener('click', (event) => {
                     console.log(event.target.innerHTML);
                 })
                 ulitem.appendChild(li)
             })
             entry.appendChild(ulitem);
            })();
         </script>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *