title: Grabbing color from form element doesn't seem to work for CSS Variable
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 );
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
      --main-color: #499ae8;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Color Theme&lt;/div&gt;
  &lt;div&gt;
    &lt;input type="color" id="main-colorbox" name="maincolorbox" value="#499ae8"&gt;
    &lt;input type="button" value="Change Color" id="main-colorbtn" onclick="maincolorset()"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>