Just playing around with some EventListeners

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.

https://codepen.io/TuscannyCodes/pen/PoWbedm

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. :face_with_monocle:

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.

1 Like

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 :sweat_smile: Thanks so much for your help!

Hello again! :pray:

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 :face_with_monocle:) . 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! :sweat_smile:

Sorry, here’s the codepen link

https://codepen.io/TuscannyCodes/pen/PoWbedm

:face_with_monocle:

See if you can write the code yourself first. You will only need one function instead of the two. You could create a variable to track the current color and then have the function change the variable to other color depending on what the current color is and then the function would apply the new color to the style.

Another approach (better than my first suggestion) is to set the body background to blue in the CSS and add a new class named black that has a background of black. Then create a function that you can pass to the click event listener that toggles the black class using the classList.toggle on the body.

2 Likes

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.

https://codepen.io/TuscannyCodes/pen/NWdboRL

The analyzer in codepen is saying there’s no mistakes in the JS. :thinking:

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 :face_with_monocle:

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.

1 Like

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. :+1:

You were 99.99% there with the following code:

function swapColor() {
  let bodySwap = document.body ;
  bodySwap.classList.toggle(".colorSwap");
}

You just need to reference the correct class name.

1 Like

Thanks guys! I really appreciate the help :pray:

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.

1 Like

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.