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>You're checking if (footer.style.display === "none") which is false accordingly to the HTML you provided as it contains the display: flex; property. Therefore, the else block of your conditional is executed.