Stylize startbutton, use addEventListener instead of onclick attribute

mdn · Jun 11, 2020 · 67fe032 · 67fe032
1 parent f2f4e0f
commit 67fe032
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/multi-track/index.html b/multi-track/index.html
@@ -15,7 +15,7 @@
 
        So provide a simple button to get things started.
   -->
-  <button id="startbutton" onclick="initDemo()">Click me first</button>
+  <button id="startbutton">Press to load tracks</button>
 
   <div class="wrapper">
     <section id="tracks">
@@ -65,7 +65,11 @@
 
 // for cross browser compatibility
 const AudioContext = window.AudioContext || window.webkitAudioContext;
-let audioCtx = null; 
+let audioCtx = null;
+
+// Provide a start button so demo can load tracks from an event handler for cross-browser compatibility
+const startButton = document.querySelector('#startbutton');
+console.log(startButton);
 
 // select all list elements
 const trackEls = document.querySelectorAll('li');
@@ -115,8 +119,7 @@
   return trackSource;
 }
 
-
-function initDemo() {
+startButton.addEventListener('click', () => {
   if (audioCtx != null) {
     return;
   }
@@ -157,7 +160,7 @@
       })
     })
   })
-}
+});
 
 </script>
 </body>

diff --git a/multi-track/style.css b/multi-track/style.css
@@ -31,6 +31,20 @@ body {
   color: var(--black);
 }
 
+#startbutton {
+  width: 12vw;
+  line-height: 3;
+  background-color: var(--boxMain);
+  border: var(--border); border-radius: var(--borderRad);
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}
+
+#startbutton:hover {
+  background-color: var(--boxSecond);
+}
+
 .wrapper {
   display: flex;
   justify-content: center;