JS class change script? (Working in JS Fiddle)

Question

JS noob here looking for some help. I've written something extremely basic in able to change a class which would hide a page element. The hide class just has a display none.

I've got it working fine in JS fiddle but when replicating it on my site, nothing happens? What am I doing wrong?

JS Fiddle - https://jsfiddle.net/MattPremier/x8rmn4cb/2/

<script type="text/javascript"> 

window.onload = function () {
var bookShow = "No";

if (bookShow == "No") {
// execute this code
document.getElementById('booking-show').classList.add('hide-widget');
}

else {
// execute this code
document.getElementById('booking-show').classList.add('show-widget');
}

};
</script>

<div id="booking-show" class="show-widget"><p>WORKING?</p></div>

Answer 1

I would recommend checking your CSS to make sure that the display isn't otherwise set unless you need it to be set then inside the hide-widget CSS class put:

“display: none !important;”

And also remove show-widget from the object at the bottom as it might be conflicting with CSS.

Note Sorry for the bad formatting of this message as I'm on my cell phone.