Review Algorithmic Thinking by Building a Dice Game - Step 2

1 
rulesBtn.addEventListener('click', () => {
  isModalShowing = !isModalShowing;
  rulesContainer.style.display = !isModalShowing ? 'block' : 'none';
  rulesBtn.textContent = !isModalShowing ? 'Hide Rules' : 'Show Rules';
})

Hello. This is my code and it is functional. It does everything the instructions ask, but the site just won’t accept it. It says that “When your rulesBtn is clicked, your rulesContainer should be visible.” which is visible. I tried other methods that were functional as well, but in vain. The site requires a specific method that I can’t figure out what it is, and the site doesn’t help with a hint or something. Can you please help me?
Thank you for reading.

This also is functional:

rulesBtn.addEventListener('click', () => {
  if (rulesBtn.textContent === 'Show rules') {
    isModalShowing = !isModalShowing;
    rulesContainer.style.display = 'block';
    rulesBtn.textContent = 'Hide Rules';
  } else if (rulesBtn.textContent === 'Hide Rules') {
    isModalShowing = !isModalShowing;
    rulesContainer.style.display = 'none';
    rulesBtn.textContent = 'Show rules';
  }
})
2

hi again, please include a link to the step.

From what I remember, it might be wise to not toggle isModalShowing until after you have taken the required actions. I’m thinking that if the current state of the modal is showing, then i want to hide the modal. After I hide it, I want to change the flag to be false. (not the reverse order of logic)

3

It worked. Thank you.

1 Like