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

Question

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>

Balázs Varga · Accepted Answer · 2022-05-30 08:43:00Z

1

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>

answered May 30, 2022 at 8:43

Balázs Varga

1,8662 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related