JavaScript点击事件切换display显隐与全局布尔值失效问题

• 按钮点击事件的回调逻辑缺失：你给changeViewButton绑定的click事件里只执行了emojiViewState = true，完全没有调用提前写好的changeView()切换函数，点击后除了修改全局变量的值，不会触发任何样式修改操作，自然看不到效果。
• 存在语法错误：DOMContentLoaded的事件监听代码末尾缺少闭合括号，JS解析阶段就会报错，导致整段脚本无法正常运行。
• 全局状态初始值和CSS默认显示状态不匹配：CSS默认设置.emojiView为显示、.iconView为隐藏，但emojiViewState初始值设为false，状态语义和实际UI表现不一致，后续如果其他逻辑调用这个状态值会出现异常。

JS部分 #

// 初始状态和CSS默认对齐：emojiView默认显示，状态值设为true
let emojiViewState = true;

const changeView = () => {
    const iconView = document.querySelector(".iconView"); 
    const emojiView = document.querySelector(".emojiView");
    if (!emojiViewState) {
        emojiView.style.display  = "none";
        iconView.style.display = "block"; 
        emojiViewState = true;
    } else {
        iconView.style.display = "none";
        emojiView.style.display = "block";
        emojiViewState = false;
    }
};

window.addEventListener("DOMContentLoaded", () => {
  const changeViewButton = document.getElementById("changeViewButton");
  changeViewButton.addEventListener("click", () => {
    // 点击时直接调用切换函数即可，状态更新逻辑已经封装在changeView内，不需要单独手动修改
    changeView();
  })
// 补全之前缺失的事件监听闭合括号
})

CSS部分（无需修改，保持原有逻辑即可） #

.iconView {
    display: none;
}
.emojiView {
    display: block;
}

不需要额外维护全局布尔状态，直接读取元素当前实际显示状态做切换，可以从根源避免状态和UI不同步的问题：

window.addEventListener("DOMContentLoaded", () => {
  const changeViewButton = document.getElementById("changeViewButton");
  const iconView = document.querySelector(".iconView"); 
  const emojiView = document.querySelector(".emojiView");
  
  changeViewButton.addEventListener("click", () => {
    // 读取emojiView当前的实际显示状态
    const isEmojiVisible = window.getComputedStyle(emojiView).display !== 'none';
    emojiView.style.display = isEmojiVisible ? 'none' : 'block';
    iconView.style.display = isEmojiVisible ? 'block' : 'none';
  })
})

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