I have an enqueued js file that contains the following:
function nightMode() {
if (localStorage.getItem('stylesheet')) {
localStorage.clear();
document.getElementById('night-css').setAttribute('href', '');
} else {
localStorage.setItem('stylesheet', '/wp-content/themes/new/css/night.css');
document.getElementById('night-css').setAttribute('href', localStorage.getItem('stylesheet'));
}
}
document.getElementById('night-mode').addEventListener('click', nightMode)
I then have a link in my header.php
file which looks like this:
<a id="night-mode">Night</a>
I also have, in my header file, a script which looks like this:
<script>
(function(){
var link = document.createElement('link');
link.setAttribute('id', 'night-css');
link.setAttribute('rel', 'stylesheet');
document.head.appendChild(link);
var style=localStorage.getItem('stylesheet');
if(style) {document.getElementById('night-css').setAttribute('href',style);
}
}
)
()
</script>
But nothing happens when I click the link. No change, no error – nothing. Is something wrong here or??
Yes, the night css file exist and yes, it is located in the correct directory.