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>