Javascript – Change input "checkbox" status for identical inputs across all HTML pages-ThrowExceptions

Exception or error:

I’m new to javascript so go easy! I have created an identical toggle switch on all of my pages for a website. After much fruitless searching, I was wondering if anyone could tell me how to change the status of the other toggle switches across all of the other pages when any one particular switch is used. I’ve managed to get the switch to do what I want, which is change the css style sheet, but want to take it a step further. Many thanks in advance. Here’s my code so far:

HTML:

<div class="lighting">
    <input id="lighting" type="checkbox" onclick="toggle()">
    <p>DAY/NIGHT MODE</p>
</div>

JS:

document.getElementById('lighting').addEventListener('click', function toggle() {
let ambience = document.getElementById('style1');
if (ambience.href.match('../CSS/style.css')) {
  ambience.href = '../CSS/dark-style.css';
} else {
  ambience.href = '../CSS/style.css';
}});
How to solve:

I would use the localStorage this way:

var ambience = document.getElementById('style1');
var toggleButton = document.getElementById('lighting');
var styleInfo = {
  'day': '../CSS/style.css',
  'night': '../CSS/dark-style.css'
};
var toggleStatus = localStorage.getItem('toggleStatus') || 'day';
function setAmbience() {
  ambience.href = styleInfo[toggleStatus];
  localStorage.setItem('toggleStatus', toggleStatus);
  toggleButton.checked = toggleStatus=='night';
};
setAmbience();
toggleButton.addEventListener('click', function(e) {
  toggleStatus = toggleStatus == 'day' ? 'night' : 'day';
  setAmbience();
});
<link id="style1" rel="stylesheet" type="text/css" href="../CSS/style.css" />
<div class="lighting">
    <input id="lighting" type="checkbox" />
    <p>DAY/NIGHT MODE</p>
</div>

Hope it is clear enough. Also on JSFiddle

###

you need to save your step in local storage and this is an example :

setInLocal(){
   localStorage.setItem('varTest', 'var')
}

and now you can getItem like this:

if(localStorage.getItem('varTest') == 'var'){
   //your code here
}

Leave a Reply

Your email address will not be published. Required fields are marked *