JavaScript中classList.toggle失效：仅添加类无法切换状态

问题现象 #

classList功能整体正常，但toggle方法无法实现类的切换操作，仅会添加类。

问题代码 #

const pencet = document.getElementById('butn')
const keluar = document.getElementById('kiri')

pencet.addEventListener('click', show())

function show() {
    keluar.classList.toggle('show');
}

问题根源 #

绑定点击事件时错误传入show()（立即执行函数），而非函数引用show。这会导致页面加载时show()就被执行一次，给元素添加了show类，但点击事件并未真正绑定到show函数，后续点击按钮不会触发任何操作，看起来就像toggle只添加类不切换。

修复方案 #

将事件绑定中的show()改为show，传递函数引用而非立即执行函数：

const pencet = document.getElementById('butn')
const keluar = document.getElementById('kiri')

// 移除括号，传递函数引用
pencet.addEventListener('click', show)

function show() {
    keluar.classList.toggle('show');
}

修改后，点击按钮时才会触发show函数，toggle方法就能正常实现类的添加和移除切换了。

内容的提问来源于stack exchange，提问作者Sulthan Muhammad