Javascript button

JavaScript
1

Hi,
First, I’m a little bit new to Javascript.

I’m making a little web library for my home books. Everything is properly done but i have problem with button script.

In PHP I have DIV, which contains three basic information about book(PHP is taking them form database). I wanted to when I click on it, another container is appearing with additional info about this book. Script works but after opening one container with additional info i need to click two times to open another one, on other book.

The reason behind this is after opening one additional info container browser remembers status of this(true) and after another click on other book it’s first changing status to false and after another click it’s changing it to true so it’s appearing.

Is there any other option to do this?

I was trying to do it with intervals but then i had to click 3 times to close it.

Function is executing by onclick. I’m using it because in this I can set parameter to get id of every book in Javascript.

var buttonStatus = false;
var info;

function showInfo(id){
    if(buttonStatus == false) {
        info = document.getElementById(id);
        buttonStatus = true;
        info.style.display = 'block';
        info.style.animation = "slideDown 0.3s";
        console.log(buttonStatus);
    } else if(buttonStatus == true){
        info = document.getElementById(id);
        info.style.display = 'none';
        buttonStatus = false;
        console.log(buttonStatus);
    }
 }
2

Nice job writing up the issue with an appropriate amount of detail! These types of state management problems are common in the JS world, and you’ll learn several tools/frameworks to assist with navigating them as you get deeper into JS.

Here is one idea for you: What if instead of tracking buttonStatus as a boolean, you instead tracked the id of the currently open book? Your showInfo function could then do something like this (in pseudocode form):

if (openId == id) {
  // Second click, close the book
  // Set `openId` back to an empty value
} else {
  // Open the new `id`
  // Set `openId` to the new `id`
}