Changing color JavaScript doesn't work

Question

My problem is: I have three elements on a list, and I have to keep changing the text color when the mouse is hover.

So I am building 3 different functions, because the colors are different.

What I did is:

<script type="text/javascript">
 var links  = document.getElementsByClassName("menuitems");
 function firsthover()
{
   links[0].style.color = "rgb(204, 0, 0)"; /*this is for avoiding setInterval delay*/

     setInterval(function(){
     if(links[0].style.color == "rgb(204, 0, 0)")
     { 
     links[0].style.color = "rgb(235, 153, 153)";
     }

     if(links[0].style.color == "rgb(235, 153, 153)")
     {
     links[0].style.color = "rgb(204, 0, 0)";
     }

    },1150);
}
 </script>

The problem is: it changes the color just once.

I tried to use hexadecimal color too, just doesn't work.

Please be patient, I am still a novice.

MildlySerious · Accepted Answer · 2015-07-08 13:37:44Z

1

The problem is a small logical flaw. The color does change, but it changes back right away.

If the first if statement evaluates as true and the color is set to rgb(235, 153, 153) the second if statement happens to be true as well, and gets checked right after the change. The color then changes back to the other rgb value.

Using else if instead of two separate statements fixes this. Alternatively you could place a return in the first if statement to prevent the second from being executed after the successful change.

if(links[0].style.color == "rgb(204, 0, 0)")
{ 
    links[0].style.color = "rgb(235, 153, 153)";
}
else if(links[0].style.color == "rgb(235, 153, 153)")
{
    links[0].style.color = "rgb(204, 0, 0)";
}

answered Jul 8, 2015 at 13:37

MildlySerious

9,2403 gold badges31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

blzn · Accepted Answer · 2015-07-08 13:37:14Z

0

You can use CSS.

Put the code below inside your <head> tag.

<style type="text/css">

.menuitems {
  color: rgb(204, 0, 0);
}

.menuitems:hover {
  color: rgb(235, 153, 153);
}

</style>

It works perfectly well.

You can also use different colors for different items by using different classes.

Define a base class for menuitems, that will be the base color of them. Then add a different class for each color you would like to use.

Your CSS:

<style type="text/css">

.menuitems { /* base color */
  color: rgb(204, 0, 0);
}

.menuitems:hover { /* base hover color */
  color: rgb(235, 153, 153);
}

.menuitem-red:hover {
  color: rgb(255, 0, 0) !important;
}

.menuitem-green:hover {
  color: rgb(0, 255, 0) !important;
}

.menuitem-blue:hover {
  color: rgb(0, 0, 255) !important;
}

</style>

Your HTML:

<ul id="menu">
  <li class="menuitem">Menu item base</li>
  <li class="menuitem menuitem-red">Menu item red</li>
  <li class="menuitem menuitem-green">Menu item green</li>
  <li class="menuitem menuitem-blue">Menu item blue</li>
</ul>

The name of classes I used and the colors are for sample purposes. Feel free to use the ones you think that fits better for your design.

edited Jul 8, 2015 at 13:37

answered Jul 8, 2015 at 13:27

blzn

3521 gold badge3 silver badges15 bronze badges

1 Comment

Hadopp24 Over a year ago

I'm sorry, i didnt' explay it in the right way. When the mouse is hover the color has to keep changing. That's why i am using js. Thank you for the answer

Collectives™ on Stack Overflow

Changing color JavaScript doesn't work

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related