What is the logic of html and js?


I have a small test. When I click on the "click" button, the display is good which changes the color, but console.log shows that the code is not working according to the logic I put in.

In the beginning, the color is black, that’s correct
I clicked the button the color turn to red, that’s correct
but looking at the console, I think "show bar" must be shown first.

I may do something wrong, or my logic was wrong. Please help me.

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>

Source: JavaSript – Stack Overflow

November 18, 2021
Category : News
Tags: display | html | javascript | onclick

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.