I need some assistance with this one. No matter what I type in I can’t seem to solve it.
rulesBtn.addEventListener(“click”); {
};
Beyond that, nothing I try works. For some reason console wants it to look like this?
rulesBtn.addEventListener(“click”, {}); {
};
Or perhaps
rulesBtn.addEventListener(“click”, () => {}); {
};
Which I find odd. Regarding setting my rulesContainer.style.visibility = “hidden”; no variation works. Event listener wants 2 arguments, nothing I try works though.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
// User Editable Region
rulesBtn.addEventListener("click"); {
};
// User Editable Region
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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
This is the closest to being correct as when you add an event listener you need to specify the event you are listening to (click in this case) plus the callback function that will be triggered for this event.
You can review the older projects to see how event listeners were used in the code (just by looking at the code in the last step of an older project)
Edit: for eg the date formatter project used an eventlistener
This is precisely the part at which I am stuck. I have done what you described already, and I have looked up how to make the rules container hidden initially, all the sources say the same thing, leading me to believe it should be rulesContainer.style.display = “hidden”; but that and any variation of that does not work. I can’t find anything on how to invert a variable when an event listener is triggered. Am I supposed to use cases and switches? I am genuinely just not sure what to do here and I’m certain I’m overthinking it. Anytime I get an answer wrong it is consistently because I did TOO MUCH coding. When I do the first thing that comes to mind I breeze through the projects. But for some reason I can’t seem to pass this one. I just need a hint or a lead in the right direction, or possibly an accurate resource on something I mentioned. What type of method to follow here.
the style.display question is really a css question. When considering how to hide something in css, what value would you use for the display property?
To find an answer, you can google “css display property” and then click on the MDN link which will show you every variation available. (the ‘none’ value should do the trick as ‘hidden’ is not valid for the display property)
I think you seem to be panicking a little bit.
I suggest you break the work down to small tasks, and try to complete one at a time.
If you are stuck on a specific task, let us know.
Edit: if you want to show the element, then you can use any of the other valid values from the display property that would work for you. Eg. block
No, not panicking. Just detailed and wanting to make progress lol
The problem is that I’m not really sure what I’m supposed to do after creating the event listener. Additionally, the display of the rules container is already set to “none” in CSS, so I’m not sure what I’m supposed to when it says “your rulesContainer should not be visible initially”
let’s look at what the ultimate goal is:
The objective is to react to someone clicking the button rulesBtn
If the button is currently set to Show Rules then the rules will show
if the button is currently set to Hide Rules then the rules will hide
Looking at the code (and assuming you are clear on the objective), what variable tells us the current situation (whether we are meant to show or hide)?
So my code is looking like this, and at this point, freeCodeCamp is showing in the preview the rules button and everything, but the code doesn’t pass. No matter what I do it has a problem with the rulesContainer. fCC is constantly flip-flopping between telling me “Your rulesContainer should not be visible initially.” and “When your rulesBtn is clicked, your rulesContainer should be visible.”
I think I am going in the right direction here and just need to solve this one thing but for whatever reason nothing seems to work. What am I forgetting?
rulesBtn.addEventListener("click", () => {})/*console wants a semicolon[CHECK]*/; {isModalShowing = true;
if (rulesContainer.style.display = 'none') {
rulesContainer.style.display = 'block';
rulesBtn.innerText = "Hide Rules";
} else {
rulesContainer.style.display = 'none';
rulesBtn.innerText = "Show Rules";
};
}
//When your rulesBtn is clicked, your isModalShowing should be true. [CHECK]
// When your rulesBtn is clicked, your rulesContainer should be visible.[maybe passing?]
// Your rulesContainer should not be visible initially. [Can't pass this no matter what I do.]
hi, you are a genius. you understand parentheses in functions. i’m struggling over this but little by little i’ll finally get it. i want to know what goes into those parentheses and why.
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
In the future, please create your own topic when you have specific questions about your own challenge code. Only respond to another thread when you want to provide help to the original poster of the other thread or have follow up questions concerning other replies given to the original poster.
The easiest way to create a topic for help with your own solution is to click the Help button located on each challenge. This will automatically import your code in a readable format and pull in the challenge url while still allowing you to ask any question about the challenge or your code.
