First click在javascript中无法操作DOM元素

我正在做一个JavaScript项目，在那里我需要在黑暗和光明模式之间切换。 HTML在这里

var btnToggle=document.getElementById（“btn切换”）
var btntogleicon=document.getElementById（“btn切换图标”）
var-isDark=true；
btntogleicon.addEventListener（“单击”，（）=>{
if（isDark）{
console.log（btntogle.style）
btnToggle.style.justifyContent=“灵活启动”；
isDark=假；
document.documentElement.style.setProperty（'--color1'，'#10111f'）；
document.documentElement.style.setProperty（'--bg1'，'线性梯度（145deg，#111221，#0e0f1c）'）；
document.documentElement.style.setProperty（'--color5'，'#f1f3'）；
document.documentElement.style.setProperty（'--bs'，9px 9px 23px#0f11a，-9px-9px 20px#1a1b32'）；
document.getElementById（“toggle img”）.src=”https://img.icons8.com/ios/2x/moon-man.png"
}否则{
console.log（btntogle.style）
btnToggle.style.justifyContent=“flex end”；
isDark=true；
document.documentElement.style.setProperty（'--color1'，'#f1f3'）；
document.documentElement.style.setProperty（'--bg1'，'#F1F3'）；
document.documentElement.style.setProperty（'--color5'，'#10111f'）；
document.documentElement.style.setProperty（'--bs'，20px 20px 60px#bebebe，20px 20px 60px#ffffff'）；
document.getElementById（“toggle img”）.src=”https://img.icons8.com/fluent-systems-regular/2x/sun.png"
}
})

：根目录{
--颜色1:#10111f；
--颜色2:#6c6c76；
--颜色3:#265385；
--颜色4:#6bc3ff；
--颜色5:#f1f3；
--bg1：线性梯度（145度，#111221，#0e0f1c）；
--bs:9px 9px 23px#0f111a，-9px-9px 23px#1a1b32；
}
.键盘{
宽度：80vw；
高度：52vh；
背景色：var（--color1）；
位置：绝对位置；
左：10vw；
右：10vw；
底部：5%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
填充：10px；
}
.btn{
颜色：var（--color5）；
字体大小：1.3rem；
光标：指针；
边界半径：8px；
背景：var（--bg1）；
盒影：var（--bs）；
填充：1雷姆1.8雷姆；
过渡：所有0.2秒缓解；
}

您的逻辑错误。 您需要在检查之前更改变量

btnToggleIcon.addEventListener（“单击”，（）=>{
isDark=！isDark；
if（isDark）{
console.log（btntogle.style）
btnToggle.style.justifyContent=“灵活启动”；
document.documentElement.style.setProperty（'--color1'，'#10111f'）；
document.documentElement.style.setProperty（'--bg1'，'线性梯度（145deg，#111221，#0e0f1c）'）；
document.documentElement.style.setProperty（'--color5'，'#f1f3'）；
document.documentElement.style.setProperty（'--bs'，9px 9px 23px#0f11a，-9px-9px 20px#1a1b32'）；
document.getElementById（“toggle img”）.src=”https://img.icons8.com/ios/2x/moon-man.png"
}否则{
console.log（btntogle.style）
btnToggle.style.justifyContent=“flex end”；
document.documentElement.style.setProperty（'--color1'，'#f1f3'）；
document.documentElement.style.setProperty（'--bg1'，'#F1F3'）；
document.documentElement.style.setProperty（'--color5'，'#10111f'）；
document.documentElement.style.setProperty（'--bs'，20px 20px 60px#bebebe，20px 20px 60px#ffffff'）；
document.getElementById（“toggle img”）.src=”https://img.icons8.com/fluent-systems-regular/2x/sun.png"
}
})

您误解了状态，您的

如果（isDark）

检查之前的状态

i、 e.如果

isDark==true

则应将图标更改为sun

var btnToggle=document.getElementById（“btn切换”）
var btntogleicon=document.getElementById（“btn切换图标”）
var-isDark=true；
btntogleicon.addEventListener（“单击”，（）=>{
if（isDark）{
isDark=假；
//现在天还不黑
document.getElementById（“toggle img”）.src=”https://img.icons8.com/fluent-systems-regular/2x/sun.png"
}否则{
isDark=true；
//在这一点上是黑暗的
document.getElementById（“toggle img”）.src=”https://img.icons8.com/ios/2x/moon-man.png"
}
})

这不就是你对国家的误解吗？非常感谢