I just spent a whole afternoon on my problem, I am new to JavaScript and I want do something :
I want the user to be able to select and change the main-color in the page.
I added a color picker in my HTML with :
<input type="color" id="colorID" oninput="changeColor()">
Then I took this code on Internet :
// on input, get value and save it as 'storedValue'
function changeColor() {
var userColor = document.getElementById('colorID').value;
localStorage.setItem('storedValue', document.body.style.backgroundColor = userColor);
}
// if there is a value stored, update color picker and background color
if(localStorage.storedValue) {
document.getElementById('colorID').value = localStorage.storedValue;
document.body.style.backgroundColor = localStorage.storedValue;
}
I want replace "document.body.style.backgroundColor" by my --main-color: #fff; of my :root. I tried a lot of things, replacing document.body by document.documentElement... Nothing wants to work !
Yes, because writing/reading in the local/session storage, needs to be done with stringify/parse methods:
// in your HTML file, add a hidden input
<input type="hidden" value="your_css_variable_value" id="myId"/>
// in JS file, query that element and get its value
const bgColor = document.querySelector('#myId').value;
// on input, get value and save it as 'storedValue'
function changeColor() {
var userColor = document.getElementById('colorID').value;
document.body.style.backgroundColor = userColor;
localStorage.setItem('storedValue', JSON.stringify(userColor));
}
// if there is a value stored, update color picker and background color
if (localStorage.getItem('storedValue')) {
const savedColor = JSON.parse(localStorage.getItem('storedValue'));
document.getElementById('colorID').value = savedColor;
document.body.style.backgroundColor = savedColor;
}
This is not the correct way to get the value from the local Storage:
function changeColor() {
var userColor = document.getElementById('colorID').value;
localStorage.setItem('storedValue', document.body.style.backgroundColor = userColor);
}
if(localStorage.storedValue) {
document.getElementById('colorID').value = localStorage.storedValue;
document.body.style.backgroundColor = localStorage.storedValue;
}
Correct way to to get the Stored value from the local Storage is:
function changeColor() {
var userColor = document.getElementById('colorID').value;
document.body.style.backgroundColor=userColor;
localStorage.setItem('storedValue', userColor);
}
if(localStorage.getItem("storedValue")) {
let storedValue=localStorage.getItem("storedValue");
document.getElementById('colorID').value = storedValue;
document.body.style.backgroundColor = storedValue;
}
I'm updating this post, thanks to everyone who replied.
My first question showed an exemple and I lost some people. This is what I really want to do :
// on input, get value and save it as 'storedValue'
function changeColor() {
var userColor = document.getElementById('colorID').value;
localStorage.setItem('storedValue', document.querySelector(':root').style.setProperty('--main-color', userColor));
}
// if there is a value stored, update color picker and background color
if(localStorage.storedValue) {
document.getElementById('colorID').value = localStorage.storedValue;
document.querySelector(':root').style.setProperty('--main-color', userColor) = localStorage.storedValue;
}
My only problem now is : It does not save when I refresh the page. I'm so close ! What should I change to make this code works ??