Trying to Get Lights On My Button To Turn On

Good. I can’t wait to see when it’s finished.

It’s all done except that both lights glow when the page is loaded…but then after I hover over the slideshow the lights glow the way they should…wierd! Maybe you can help me out here…???

see here: https://codepen.io/IDCoder/full/OWbXLw/

In your html, take out class “red-glow” and “green-glow”. Then it should only show up when you call it in JavaScript.

Let me know if this works.

when I do that then the green button isn’t glowing by default as it shoul…I think I have to add a boolean function

Oh, that was my mistake. If you want green-glow on then leave it as a class inside green, and just removeClass like you did earlier.

But if you want a glow Off, then do not place it in the html because JavaScript will use it first thing.

do a fork of my code, so I can see…I’d def appreciate it…

   <div class="red"></div>
   <div class="green glow-green"></div>
 </div>

So you I think you can leave the JavaScript for it just like it is.

That works perfectly! Now can you take a look at my next question in the javascript blog? Thanks so much!

I’m glad it works :slight_smile:

Where is the other question?

Unfortunately it wont work in GitHub! https://mtzioncode.github.io :frowning: :frowning:
It says, “Cannot read property ‘addEventListener’ of null” and shows a squiggly red line underneath this showcase.addEventListener("mouseover", function(){ (even though it works in Code Pen)!!
Also, my other question is here: https://forum.freecodecamp.org/t/how-to-enable-javascript-blinking-light-for-hover/199828/1

Try changing the addEventListener to .on

So it looks like:
showcase.on(“mouseover” function(){

});

This other one has a slightly different logic…

If we made green-glow by default, and it glowed until the screen changed, then when we click on drop-down we are looking to see if green-glow is still true?

Is this what you are trying to do?

For the blinking function, can you respond in that post so as to avoid confusion?

Still same problem! :frowning: :frowning: … see screenshot here: https://s33.postimg.cc/bhfx9hfjj/issues_2.jpg

Oh boy. I’m really not sure …

If you are using $ then you are using jQuery.

I don’t know if it will make a difference, but try adding this at the top of the JavaScript page:
$(document).ready(function () {
“use strict”;

Also add Bootstrap.js to your JavaScript settings, since you are using the CSS:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

I did that already. It works in Code Pen, but won’t work in GitHub…weirdest thing ever!! https://github.com/MtZionCode/MtZionCode.github.io/blob/master/profile.js
https://github.com/MtZionCode/MtZionCode.github.io/blob/master/index.html

Ok, on your index page, you have the jquery link in the header. Try to place it after the last " < / div > "
and before the end body tag.

You do not have the bootstrap.min.js . That should go under the jquery.

On your profile page, you do not have the
$(document).ready(function () {
“use strict”;

before any else on the page.

CodePen supplies a lot of what we ask for, almost automatically. GitHub won’t. You will need to hard code your requests.

See if making these changes on GitHub will help.