html和js的逻辑是什么？ [关闭]

Question

我有一个小测试。当我点击“点击”按钮时，显示效果很好，颜色会改变，但是console.log显示代码没有按照我输入的逻辑运行。

一开始，颜色是黑色的，没错 我点击按钮颜色变成红色，这是正确的 但是看控制台，我认为必须先显示“显示栏”。

我可能做错了什么，或者我的逻辑错了。请帮帮我。

function hideShow() {
  const footer = document.getElementById("footer");
  authorInfo = document.getElementById("authorInfo");
  if (footer.style.display === "none") {
    footer.style.display = "block";
    authorInfo.style.display = "none";
    console.log("show bar");
  } else {
    footer.style.display = "none";
    authorInfo.style.display = "flex";
    console.log("hide bar");
  }
}

<div id="footer" class="item" style="
        width: 100px;
        height: 200px;
        background-color: black;
        display: flex;
      "></div>
<div id="authorInfo" class="object" style="width: 100px; height: 200px; background-color: red; display: none"></div>
<button type="button" onclick="hideShow()">click</button>

Answer 1

您正在检查 if (footer.style.display === "none")，根据您提供的 HTML，这是错误的，因为它包含 display: flex; 属性。因此，条件的else 块被执行。