html和js的逻辑是什么？

Question

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

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

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

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

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

html和js的逻辑是什么？

What is the logic of html and js?

html

javascript

onclick

display