How to change root element with another root element property on js-CodePudding

hello guys i have a little problem but i cant figure out can you help me? I have a some code in css

const settings = document.getElementById('settings');
const customizetheme = document.getElementById('ct');
let onpx = document.getElementById('on');
let onikipx = document.getElementById('oniki');
let ondortpx = document.getElementById('ondort');
let onaltipx = document.getElementById('onalti');
let changeforred = document.getElementById('red');
let changeforblack = document.getElementById('black');
let changeforpurple = document.getElementById('purple');
let changefororange = document.getElementById('orange');


onpx.onclick = function() {
  document.documentElement.style.setProperty('--currentfont', '10px');
  onpx.classList.add('active'),
    onikipx.classList.remove('active'),
    ondortpx.classList.remove('active'),
    onaltipx.classList.remove('active');

}

onikipx.onclick = function() {
  document.documentElement.style.setProperty('--currentfont', '12px');
  onpx.classList.remove('active'),
    onikipx.classList.add('active'),
    ondortpx.classList.remove('active'),
    onaltipx.classList.remove('active');

}
ondortpx.onclick = function() {
  document.documentElement.style.setProperty('--currentfont', '14px');
  onpx.classList.remove('active'),
    onikipx.classList.remove('active'),
    ondortpx.classList.add('active'),
    onaltipx.classList.remove('active');

}
onaltipx.onclick = function() {
  onpx.classList.remove('active'),
    onikipx.classList.remove('active'),
    ondortpx.classList.remove('active'),
    onaltipx.classList.add('active');
  document.documentElement.style.setProperty('--currentfont', '16px');
}

:root {
  /* Colors*/
  --white: #fff;
  --dark: #000;
  --purple: #9051ff;
  --crimson: crimson;
  --black: #0c192c;
  /* Font Sizes*/
  --onpxfont: 10px;
  --onikipxfont: 12px;
  --ondortpxfont: 14px;
  --onaltipxfont: 16px;
  --currentfont: var(--onikipxfont);
}

<div >
  <section id="home">
    <div id="ct" >
      <h3>Font Büyüklüğü</h3>
      <ul>
        <li id="on"><img src="./font.png">10px</li>
        <li id="oniki" ><img src="./font.png">12px</li>
        <li id="ondort"><img src="./font.png">14px</li>
        <li id="onalti"><img src="./font.png">16px</li>
      </ul>
      <h3>Tema Rengi</h3>
      <div >
        <span id="red"></span>
        <span id="black"></span>
        <span id="purple"></span>
        <span id="orange"></span>
      </div>
    </div>
  </section>
</div>

and lastly my js like that;

but when I want change code like that... my code broken what's the wrong can you explain me?

<script>
const settings = document.getElementById('settings');
const customizetheme = document.getElementById('ct');
let onpx = document.getElementById('on');
let onikipx = document.getElementById('oniki');
let ondortpx = document.getElementById('ondort');
let onaltipx = document.getElementById('onalti');
let changeforred = document.getElementById('red');
let changeforblack = document.getElementById('black');
let changeforpurple = document.getElementById('purple');
let changefororange = document.getElementById('orange');


onpx.onclick = function() {
  document.documentElement.style.setProperty('--currentfont', 'onpxfont');
  onpx.classList.add('active'),
    onikipx.classList.remove('active'),
    ondortpx.classList.remove('active'),
    onaltipx.classList.remove('active');

}

onikipx.onclick = function() {
  document.documentElement.style.setProperty('--currentfont', 'onikipxfont');
  onpx.classList.remove('active'),
    onikipx.classList.add('active'),
    ondortpx.classList.remove('active'),
    onaltipx.classList.remove('active');

}
ondortpx.onclick = function() {
  document.documentElement.style.setProperty('--currentfont', 'ondortpxfont');
  onpx.classList.remove('active'),
    onikipx.classList.remove('active'),
    ondortpx.classList.add('active'),
    onaltipx.classList.remove('active');

}
onaltipx.onclick = function() {
  onpx.classList.remove('active'),
    onikipx.classList.remove('active'),
    ondortpx.classList.remove('active'),
    onaltipx.classList.add('active');
  document.documentElement.style.setProperty('--currentfont', 'onaltipxfont');
}
</script>

Frankly, I think we can't change var with set property, I don't know, I have no idea.

CodePudding user response：

You should specify the variable name inside var().

EG:-

document.documentElement.style.setProperty('--currentfont', 'var(--ondortpxfont)');