So I was trying to get user input and put it as CSS Variable for the whole site but it only provides me with the default value (of the Color picker). I've looked up many forums for JS and HTML-related mistakes but no luck. It would also be of great luck if I won't have to convert these into a form because of the layout of my already set HTML.
var changeclrbtn = document.getElementById('main-colorbtn');
var maincolore = document.getElementById('main-colorbox').value
changeclrbtn.onclick = function() {maincolorset()};
function maincolorset() {
document.documentElement.style.setProperty('--main-color', maincolore );
}:root {
--main-color: #499ae8;
}<div>Color Theme</div>
<div>
<input type="color" id="main-colorbox" name="maincolorbox" value="#499ae8">
<input type="button" value="Change Color" id="main-colorbtn" onclick="maincolorset()">
</div>You only need to move this line:
var maincolore = document.getElementById('main-colorbox').value
inside your function.
Now you only set the maincolore variable on the first pageload, not when you click the button.
var changeclrbtn = document.getElementById('main-colorbtn');
changeclrbtn.onclick = function() {maincolorset()};
function maincolorset() {
var maincolore = document.getElementById('main-colorbox').value;
document.documentElement.style.setProperty('--main-color', maincolore );
}:root {
--main-color: #499ae8;
}
body {
background: var(--main-color);
}<div>Color Theme</div>
<div>
<input type="color" id="main-colorbox" name="maincolorbox" value="#499ae8">
<input type="button" value="Change Color" id="main-colorbtn" onclick="maincolorset()">
</div>