CODEWITHSUNDEEP
javascripthtmlbuttonevent-handling
Julian
Julian

Reputation: 53

Cross browser addEventListener

i have used multiple EventListeners but this particular one is not working in IE:

document.querySelector('#assets').addEventListener('loaded', function () {
 document.getElementById('startbutton').style.display = "inline";
});

document.querySelector('#assets').addEventListener('loaded', function () {
 document.getElementById('loadingbutton').style.display = "none";
});

I want display a button while assets load and then remove the button with display none as soon as the assets have loaded. Problem is that the loadingbutton does not get removed, so the style does not get applied. This only happens in Internet Explorer. How do i write it with attachEvent so that it works?

The buttons html:

<button id="startbutton" class="my_popup_close button" onclick="playSound();setTimeout(showDiv, 2000);" name="answer" value="Show Div" style="display: none;">Ready</button>

<button class="buttonloading loader" id="loadingbutton">Loading<span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span></button>

Upvotes: 1

Views: 610

Answers (1)

Adam Azad
Adam Azad

Reputation: 11297

The listened to element is the same, as well as the events. You should combine the callback like:

document.querySelector('#assets').addEventListener('loaded', function (){
   // display #startbutton and hide #loadingbutton
   document.getElementById('startbutton').style.display = "inline";
   document.getElementById('loadingbutton').style.display = "none";
});

Upvotes: 2

Related Questions