Grabbing color from form element doesn't seem to work for CSS Variable-CodePudding

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.

Javascript

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 );
}

HTML

<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>

CSS

:root {
    --main-color: #499ae8;
}

CodePudding user response：

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>