HTML与JS交互逻辑疑问：点击按钮显示正常但console日志不符合预期

问题原因 #

你的判断逻辑和元素初始属性不匹配，是代码逻辑编写的问题：

• 初始状态下#footer的行内样式display值为flex，不是none
• 第一次调用hideShow()函数时，if (footer.style.display === "none")的条件不成立，会直接走else分支，所以控制台打印的是hide bar；但else分支的操作刚好是隐藏黑色footer、显示红色authorInfo，和你预期的视觉效果一致，才会出现「展示效果正常但日志输出不符合预期」的错位情况。

另外代码还存在隐性问题：authorInfo = document.getElementById("authorInfo")没有加let/const变量声明关键字，会被默认挂载为全局变量，存在变量污染风险。

修正方案 #

如果要实现「第一次点击打印show bar，同时显示红色块」的需求，调整判断逻辑即可，参考修改后的代码：

function hideShow() {
  const footer = document.getElementById("footer");
  // 补上变量声明，避免变量污染
  const authorInfo = document.getElementById("authorInfo");
  // 调整判断条件匹配初始状态
  if (footer.style.display !== "none") {
    footer.style.display = "none";
    authorInfo.style.display = "flex";
    console.log("show bar");
  } else {
    footer.style.display = "block";
    authorInfo.style.display = "none";
    console.log("hide bar");
  }
}

你也可以选择不修改JS逻辑，直接调整HTML中两个元素的初始display属性：把#footer初始设为display: none，#authorInfo初始设为display: flex，也能匹配原有逻辑的输出预期。

内容的提问来源于stack exchange，提问作者Đức Seven