Javascript: style.cssText and classList.add/remove not working *sometimes*

[QQ_cazo]

My code:

                                  events: {
                                    onPlay: function(e) {
                                        document.getElementById('theatermode').addEventListener('click', async function() {
                                        var t = {
                                          a: document.querySelectorAll('.bn35')[0],
                                          b: document.querySelectorAll('._1OVBBWLtHoSPfGCRaPzpTfe ')[0],
                                        }
                                        if (t.a.classList.contains("t2heater")&& t.b.classList.contains("t2heater")) {
                                        t.a.style.cssText = ''
                                        t.b.style.cssText = ''
                                        t.a.classList.remove("t2heater")
                                        t.b.classList.remove("t2heater")
                                        }else{
                                        t.a.classList.add("t2heater")
                                        t.b.classList.add("t2heater")      
                                        if (!t.a.classList.contains("t2heater") && !t.b.classList.contains("t2heater")) {
                                        t.a.classList.add("t2heater")
                                        t.b.classList.add("t2heater")                                      
                                        }
                                        t.a.style.cssText = 'padding-left:15%;padding-right:15%'
                                        t.b.style.cssText = 'width:70% !important;'
                                        }
                                      })
                                    }
                                  }

 

Page markup:

 

--title---

<div class= _1OVBBWLtHoSPfGCRaPzpTfe>

<video loaded/ready =events.onplay.... >
<div class=bn35>

 

For some reason, the code above only fires Sometimes. The click does work, But the classList and csstext do not work, In google chrome, the DIVs flash (showing a change) but still not class or CSS text.

 

help?

 

These events are linked to my video player

[colonel_mortis]

Have you tried adding a breakpoint in the Chrome debugger? That will let you see which bits of code are being run (which branch, etc), and to inspect the state of the document at the time that it runs.

[duncannah]

I noticed you're creating this event listener every time the "onPlay" event is fired, so you're attaching a new event listener every time this is fired, and thus you'll end up having duplicate event handlers cancelling each other out. 

You could find another event to listen to, to be able to attach the click handler, or you can define your handler once, so subsequent calls to addEventListener won't attach a new listener the same handler is already attached:

const clickHandler = async function () { /* your handler here */ };

const options = {
	events: {
		onPlay: function () {
			document.getElementById("theatermode").addEventListener("click", clickHandler);
		}
	}
}

 

[QQ_cazo]

On 1/27/2022 at 2:01 PM, colonel_mortis said:

Have you tried adding a breakpoint in the Chrome debugger? That will let you see which bits of code are being run (which branch, etc), and to inspect the state of the document at the time that it runs.

I have never tried the chrome debugger, could i have an example?