Toggle javascript execution on/off with text link in html5 audio

Question

I am using a code to highlight words that are read depending "on" the time, and it's on by default. I need it to stay on by default, but add a function on a "text link" that can toggle the highlighting on/off (so there is no highlighting when clicked. So when I click the word "Disable", it disables the execution of the code, and the word "Disable" changes automatically to the word "Enable", which does the contrary.. etc.

And here is a snippet of the code:

 var spns = document.getElementsByTagName("SPAN"); var audi = document.getElementById("adi"); audi.addEventListener("timeupdate", f1); function f1(){ var i; for (i = 0 ; i< spns.length ; i++){ var time = Number(spns[i].id.slice(2)); if(time < audi.currentTime){ if (i>0) spns[i -1].style.backgroundColor = "white"; spns[i].style.backgroundColor = "red"; } } } 

 <audio id = "adi" controls> <source src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"></source> </audio> <div> <pre> <span id="ts0.5">Ok, we're trying this for a second time</span> , <span id="ts3">to test the ability...</span> </pre> </div> 

Answer 1

I would use CSS and target the spans depending on parent's class. This makes the logic better less complicated.

 var textHighlightOn = true, btnToggle = document.getElementById('toggleTxt'), textDiv = document.querySelector('.text-highlight') spns = document.getElementsByTagName("SPAN"), audi = document.getElementById("adi"); audi.addEventListener("timeupdate", f1); function f1(){ var i; for (i = 0 ; i< spns.length ; i++){ var time = Number(spns[i].id.slice(2)); if(time < audi.currentTime){ if (i>0) { spns[i -1].classList.remove('active'); spns[i -1].classList.add('active-prev'); } spns[i].classList.add('active'); } } } btnToggle.addEventListener("click", function(){ if(textHighlightOn){ textDiv.classList.add('off'); } else { textDiv.classList.remove('off'); } this.innerHTML = 'Highlight ' + (textHighlightOn ? 'off ' : ' on'); textHighlightOn = !textHighlightOn; }); 

 body { background: #008000; } .text-highlight span.active-prev { background: #fff; } .text-highlight span.active { background: #03a9f4; } .text-highlight.off span { background: transparent; } 

 <audio id="adi" controls> <source src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3"/> </audio> <button id="toggleTxt">Highlight on</button> <div class="text-highlight"> <pre> <span id="ts0.5">Ok, we're trying this for a second time</span> , <span id="ts3">to test the ability...</span> </pre> </div> 

Answer 2

You can either use removeEventListener : audi.removeEventListener(f1)

Or you can have a function before your f1() function, var enabled = true , and in f1, return at the beginning if enabled === false , and write your button click listeners to change the enabled variable.