Hi there! I've been working on this code that allows me to change the color of the sidebar on an HTML page using a color picker and saves it to local storage.
But now, I'm having trouble figuring out how to use the same code to change the color of other elements, such as buttons, with the color picker. Currently, only the sidebar changes color.
You can check out my current situation here: https://codepen.io/anon/pen/wyVQbe
/*Set your own color*/
var jscolor;
var defaultColor = (localStorage.getItem("color")) ? localStorage.getItem("color"): "#0078c0";
window.addEventListener("load", startup, false);
function startup() {
jscolor = document.querySelector(".jscolor");
if (jscolor) {
jscolor.value = defaultColor;
jscolor.addEventListener("input", updateFirst, false);
jscolor.addEventListener("change", updateAll, false);
jscolor.select();
}
refreshSidebar(defaultColor);
}
function updateFirst(event) {
refreshSidebar(event.target.value);
}
function refreshSidebar(color) {
var side = document.querySelector(".sidebar");
if (side) {
side.style.backgroundColor = color;
}
}
function updateAll(event) {
document.querySelectorAll(".sidebar").forEach(function(side) {
side.style.backgroundColor = event.target.value
localStorage.setItem('color', event.target.value);
});
}