Tell us what’s happening:
My code works as intended. I have read other posts that state it could be a browser issue. I have used three different computers all on separate browsers and incognito mode and i cant get it to pass. I may just skip this lesson but figured id ask first. maybe im missing something…
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
// User Editable Region
rulesBtn.addEventListener("click", () => {
isModalShowing = !isModalShowing;
rulesContainer.style.display = !isModalShowing ? "block" : "none";
rulesBtn.textContent = !isModalShowing ? "Hide rules" : "Show rules";
})
// User Editable Region
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Review Algorithmic Thinking by Building a Dice Game - Step 2
I copied the code and it didn’t work for me.
You need to switch your logic.
im not sure what i would need to fix then as it works on my computer. If i click show rules the rules box appears and the text of the button is changed to “hide rules”.
i fixed it by swapping places of “block” and “none” and “show rules” and “hide rules” but i dont understand why the test would not pass the other way.
so when I pasted your code in, I clicked the show rules button once.
The first time I clicked, nothing happened (please try by copy the code again to reload the code and then click just once)
The 2nd time I tried it worked.
I think what was happening was the initial state of the modal was ‘hidden’.
You toggled the modal boolean to true on the first click.
then the first condition check the (now toggled) boolean and it said ‘true’ but because it was true your ! bang switched it back to ‘false’ and your code made the rules container ‘hide’ even though it was already hidden.
If you moved the first line of your code after the other two lines, it probably would have been fine.