Im just playing around with some eventListeners trying to build my chops. I just typed out some random jargon and wanted to add a click event to the h1 that changes the backgroundColor. But for some reason, I can’t get it to work… Any Idea what’s going wrong here? Im sure its something simple but I can’t seem to put my finger on what’s broken here.
Huge thanks for your guidance.
Ok ive fixed it in a way, but now the issue that im having is that the “click” event seems to automatically be triggering. The background is black wen it should only be black AFTER the event triggers the function. 
The second arg to addEventListener is not quite right. You want to pass the name of the listening function, you don’t actually want to call the listening function.
Ok I fixed it. I believe I had some missing semicolons or something. But yes BB, I didn’t know that I could actually call the function from inside the listener like that. Now I see that I must put only the name as to reference the function in order for it to work properly.
THIS is exactly why I wanted to play around with this. So that I could learn these things 
Thanks so much for your help!
Hello again! 
I have here a dummy site that im working on for practice. I have it set up so that the user can click the main h1, and change the background color. I couldn’t figure out how to get it to toggle back to the original color with another one-click event ( because if I have another click event on the same h1, they both fire at the same time ) . So I made it so that it switches back to the original color via a dblClick event.
I want to know how I can create a one-click toggle feature that changes the background color on the h1 and then changes it back. Im thinking I can do something with a class and toggle that class on and off with an if statement or switch statement??? But im not sure.
Any help is greatly appreciated. Thank you!
Ok I tried a couple of things but ran into problems on both ends. I decided to go with the “add a class and toggle” method. Not why but its not working.
here’s the new link because I didn’t want to mess up the code in the original pen.
The analyzer in codepen is saying there’s no mistakes in the JS. 
There’s one tiny mistake in this line:
bodySwap.classList.toggle(".colorSwap");
The name of the class is colorSwap.
Yeah. The name of the class is colorSwap… Im not sure im understanding the problem here. Disco
if tried a number of things and can’t seem to get it to work. The code makes sense, but the click event isn’t going. Its not clear to me why this is happening.
Ive tried adding a class and toggling. That didn’t work for whatever reason. And Ive tried putting the colors in variables and using if statements to switch between the colors.
Sorry I should’ve made myself clearer.
The name of class is colorSwap, not .colorSwap.
JS already knows that you’re working on a classList, so you don’t need the dot.
Using querySelector(.colorSwap) though, you need to indicate that you’re looking for an element with a certain class, so you add the dot.
Im close, because the page loads up as blue and I can see the click event working to change it to black if I click the header.
however I cannot toggle once the page is set to black. Additionally, I would like to page to start off as black and be able to toggle blue and back to black.
got it. Thanks. 
Thanks guys! I really appreciate the help
I Fixed the classname issue. However, it still does not seem to be working correctly. There is no toggle happening here…
im noticing that when the page loads up, its black but then it switches to the blue color. Its almost like the event is triggering without clicking… not sure why this is happening . I want the page to load up black, and then switch to blue once the event is triggered.
If you want the background to be CadetBlue when the page first loads, then you need to set the body to CadetBlue with your CSS. Right now, you have it black. Also, the following lines are not needed at all.
var allBlack = (document.body.style.backgroundColor = "Black");
var allBlue = (document.body.style.backgroundColor = "CadetBlue");
Make sure you change your colorSwap background color to be black after making the changes I mentioned at the top of this reply.
I want the background to be black on the start and can be toggled to CadetBlue. So its set correctly. However, when the page loads it seems that the class becomes automatically applied, changing the background color to blue instantly without the user having to click, which is not what im wanting to achieve.
Also, im unable to toggle between the classes at all. not sure why.
WOW I went in and commented out those unneeded variables and the code started working perfectly!
How could just having those variables sitting there be effecting the code like that??? Im so confused, but super happy that it works now!
How could those variable have been effecting the page like that. They were unused and just sitting there!? but I guess some how they were working in the code??? WILD 
Oh ok I see… I was under the impression that after the var, const or let declaration that the line of code after the declaration and assignment is all contained into the variable itself.
Now I know. Thank you so much for your help, I really appreciate it greatly