javascript button function not working on first click why? [duplicate]

i’m creating a menu button and a theme button , but when i press the menu button it doesn’t work from the first click, it needs two clicks, but the theme button is working correctly , what i want is to make the menu button work from the first click

<script>
function initate() {
    var style1 = document.getElementById("themeicon");
    var logo = document.getElementById("logimg");
    let root = document.documentElement;
    var x = document.getElementById('togglebtn');
    var icon = document.getElementById('menuicon');
    let toggleclk = document.getElementById('toggle'); 
    style1.onclick = function () { 
      if(style1.className == "far fa-moon"){
      root.style.setProperty('--black1','#111');
 
  root.style.setProperty('--submit-border','#352418');
  root.style.setProperty('--submit-border-btm','#352418');
  root.style.setProperty('--light-grey','#111');
  root.style.setProperty('--light-grey2','#222');
      }
      else{
        root.style.setProperty('--black1','whitesmoke');
  root.style.setProperty('--black2','whitesmoke');
  root.style.setProperty('--black3','#fff');
  root.style.setProperty('--submit-border-btm','#91603eea');
  root.style.setProperty('--light-grey','lightgrey');
  root.style.setProperty('--light-grey2','lightgrey');
  root.style.setProperty('--box-bg','whitesmoke');
  
      }
    }
    
    toggleclk.onclick = function() {
  if (x.style.transform == "translate(130%, -160%)") {
    x.style.transform = "translate(130%, 1%)";
    x.style.opacity = "1";
    root.style.setProperty('--transform-before', 'rotate(45deg)');
    root.style.setProperty('--transform-after', 'rotate(-45deg)');
    root.style.setProperty('--transform-span', 'scaleX(0)');
  }
   else {
    x.style.transform = "translate(130%, -160%)";
    x.style.opacity = "0";
    root.style.setProperty('--transform-before', ' translateY(-10px)');
    root.style.setProperty('--transform-after', ' translateY(10px)');
    root.style.setProperty('--transform-span', ' translateY(0)');
  }
 
}

}
window.onload = initate;
</script>

what is the problem