callback functions and sub display

index.html

@@ -16,10 +16,10 @@
         <li>if there is a call back (define syntax) call the callback</li>
     </ul>
    
+    <div id="sub">Hello</div>
     <audio src="jeetee.mp3" id="player" controls>
 
 
-
 </body>
 
 </html>

index.js

@@ -1,11 +1,34 @@
+// 1. Import dependencies, select DOM elements, define global var
 import srtParser2 from 'https://cdn.skypack.dev/srt-parser-2';
 const player = document.querySelector('#player')
+const sub = document.querySelector('#sub')
 
+
+const srtFunctions = {
+    1: () => testFunction(),
+    2: () => testFunction(),
+    3: () => test2()
+}
+
+const printText = (text) => {
+    sub.innerHTML = text
+}
+
+const testFunction = () => {
+    console.log('test function eheh')
+}
+
+const test2 = () => {
+    console.log('test 2')
+}
+
+// 3. Parse .srt file and setup audio player callback
 const readSRT = (srt) => {
     let parser = new srtParser2();
     let srt_array = parser.fromSrt(srt)
     console.log(srt_array)
     
+    
     let currentId = 0
     player.addEventListener('timeupdate', (e)=>{
         let current = srt_array.find(
@@ -15,10 +38,13 @@ const readSRT = (srt) => {
              )
         if (current != undefined && currentId != parseInt(current.id)){
             currentId = parseInt(current.id)
-            console.log(current.text)
+            printText(current.text)
+            if(srtFunctions.hasOwnProperty(current.id))
+                srtFunctions[current.id]()
         }
     })
 }
 
+// 2. Open .srt file and trigger readSRT() function
 fetch('jeetee.srt').then(res=>res.text()).then(data=>readSRT(data))