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