Create customAttributes

2021-06-04 17:11:24 -04:00
parent f8768fee07
commit fb2a4bc677
1 changed files with 31 additions and 0 deletions
@@ -0,0 +1,31 @@
 <!DOCTYPE html>
 <html>
 <head> <title>Complete JavaScript Course</title>
 </head>
 <body>   
    <div id="message">Complete JavaScript Course</div>    <div id="output"></div>   
    <script>     
        window.onload = build;
        const myArray = ["Laurence", "Mike", "John", "Larry", "Kim", "Joanne", "Lisa", "Janet", "Jane"];
        const message = document.getElementById('message');
        function build() {
            let html = "<h1>My Friends Table</h1><table>";
            myArray.forEach((item, index) => {
                html += `<tr data-row="${index}"><td>${item}</td>`;
                html += `<td class="box">${index + 1}</td></tr>`;
            })
            html += '</table>';
            document.getElementById('output').innerHTML = html;
            const boxes = document.querySelectorAll('#output .box');
            boxes.forEach((el) => {
                el.addEventListener('click', (e) => {
                    let par = el.closest('[data-row]')
                    let temp = par.getAttribute('data-row');
                    let tempName = par.firstChild.textContent;
                    message.innerHTML = `${tempName } is in row #${temp}`;
                })
            })
        }
    </script>
 </body>
 </html>