How do I make my javascript function change the color of my text?

Question

I'm trying to make a website. And, on my website, on the menu page, I want my menu options to change color depending on which one has been clicked on. For example, when the page loads, it automatically starts on main, so the main button is green. But, when I click vegoption, I want vegoption to turn green and mainoption to turn black. And the same system for the other options. Please forgive me if I have done things wrong in my javascript. I'm very new to the language. If there are any other improvements I can make, please let me know.

Here is the code:

/* Start Variables */

:root {
  --aa-color: #57C324;
}


/* End Variables */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
}


/* Start Navbar */

.navbar-wrapper {
  // background: blue;
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 5px 10px 8px #888888;
  z-index: 100;
  position: relative;
}

.leftside {
  // background: green;
  width: 50%;
  height: 10px;
}

.rightside {
  width: 50%;
  // background: red;
}

.options {
  // background: yellow;
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.linkhome {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu {
  font-size: 120%;
  text-decoration: none;
  color: var(--aa-color);
  ;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkabout {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkfood {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkculture {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu:hover {
  color: var(--aa-color);
}

.linkabout:hover {
  color: var(--aa-color);
}

.linkfood:hover {
  color: var(--aa-color);
}

.linkculture:hover {
  color: var(--aa-color);
}


/* End Navbar */


/* Start Main */

.injera-menu {
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 10%;
  display: block;
}

.ourmenutext {
  position: absolute;
  margin-top: -25%;
  font-size: 400%;
  background: -webkit-linear-gradient(#10CB00, #10CB00, #FFC701, #FF0101, #FF0101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px white;
  -webkit-text-stroke: 3px black;
  margin-left: 3%;
}

.menuoptions {
  display: flex;
  width: 100%;
  justify-content: center;
}

.mainoption {
  margin: 2% 5%;
  color: var(--aa-color);
}

.vegoption {
  margin: 2% 5%;
}

.specialoption {
  margin: 2% 5%;
}

.drinksoption {
  margin: 2% 5%;
}

.vegoption:hover {
  color: var(--aa-color)
}

.specialoption:hover {
  color: var(--aa-color)
}

.drinksoption:hover {
  color: var(--aa-color)
}


/* Start Menu */

.menu {
  position: relative;
}


/* Start Main Menu */

.menumain {
  justify-content: center;
  color: var(--aa-color);
  dis
}

.price {
  float: right;
  border: 1px solid var(--aa-color);
  padding: 1% 2%;

}

.dishtitle {
  margin-left: 40%;
  text-decoration: underline;
}

.dishinfo {
  padding: 5% 10%;
  font-size: 150%;
}

.menu-item {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
    justify-content: center;
}

.menuveg {
    width: 100%;
  justify-content: center;
  color: var(--aa-color);
  display: none;
}

.one-pers, .two-pers, .three-pers, .four-pers{
     margin: 4% 40%;
   display: flex;
}

.perstext{
  width: 50%;
  margin-right: 20%;
}

.persprice{
  width: 50%;
  float: left;
}

.menuspecial {
    width: 100%;
  justify-content: center;
  color: var(--aa-color);
  display: none;
}

.dishinfo2 {
  padding: 5% 10%;
  font-size: 150%;
  text-decoration: none;
  text-align: center;
}
/* End Menu */


/* End Main */





  
  Addis Abeba | Menu
  
  
  



  
  
    
      

      
      
        
          Home
          Menu
          About Us
          Our Food
          Ethiopian Culture
        
      
    
  
  

  
  
    
      
        
      
      
        

          Menu
      
    
  

  
    Main
    Vegetarian
    Special
    Drinks
  

  

    
    
      
        
          CHF 21.-
        
        
          Key Wat
        
        
          Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
        
      

      
        
          CHF 23.-
        
        
          Doro Wat
        
        
          Chicken cooked in specially seasoned red sauce and Ethiopian butter.
        
      

      
        
          CHF 23.-
        
        
          Yebeg Wat
        
        
          Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
        
      

      
        
          CHF 25.-
        
        
          Kitfo
        
        
          Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
        
      

      
        
          CHF 24.-
        
        
          Beef Tibs
        
        
          Strips of beef sauteed with onion and pepper.
        
      

      
        
          CHF 24.-
        
        
          Lamb Tibs
        
        
          Cubes of lamb fried in buter, onions, green and black peppers.
        
      
    

    

    
      
        
          CHF 17.-
        
        
          Shiro
        
        
          Yellow split peas cooked in special sauce and blended into a puree flavored with spices.
                
            

      
        
          CHF 17.-
        
        
          Misir
        
        
          Cracked lentil cooked in spiced sauce.
        
      

      
        
          CHF 16.-
        
        
          Gomen
        
        
          Assortment  of spicy chopped vegetables cooked in spiced butter, onions and various kinds of exotic peppers.
        
      

      
        
          Vegetarian Tasting Menu
        

        
            
                
                    1 Pers
                
                        
                            
                      CHF 22.-
                    
                        
            

                    
                
                    2 Pers
                
                        
                            
                      CHF 44.-
                    
                        
            

                    
                
                    3 Pers
                
                        
                            
                      CHF 66.-
                    
                        
            

                    
                
                    4 Pers
                
                        
                            
                      CHF 88.-
                    
                        
            
        
      
    

    

    
      
        
          Addis Abeba Special
        
        
          Includes:
          Tibs, Yebuegue Alicha, Doro Woot and choice of Lentils or Vegetables
        
        
                    
                
                    2 Pers
                
                        
                            
                      CHF 52.-
                    
                        
            

                    
                
                    3 Pers
                
                        
                            
                      CHF 78.-
                    
                        
            

                    
                
                    4 Pers
                
                        
                            
                      CHF 99.-
                    
                        
            
        
      

      
        
          Tasting Menu
        
        
          Includes:
          Tibs, Yebuegue Alicha, Doro Woot, Kitfo and choice of Lentils or Vegetables
        
        
                    
                
                    2 Pers
                
                        
                            
                      CHF 60.-
                    
                        
            

                    
                
                    3 Pers
                
                        
                            
                      CHF 90.-
                    
                        
            

                    
                
                    4 Pers
                
                        
                            
                      CHF 115.-

Any help is greatly appreciated.

Thank you!

jakeu_ · Accepted Answer

If you aren't using a framework, I'd still suggest using jQuery, especially because it's very beginner friendly in my opinion.

The latest version of jQuery can be found here. You can simply link it within your html like this:

With jQuery, you can set events for when a object is clicked. An example for a click event for one of your classes would be something like this:

$(".vegoption").click(function(){
    // do something when .vegoption is clicked
})

If you want to change its color when clicked, you can simply call .css() to change the background-color like this:

$(".vegoption").click(function(){
    $(this).css("background-color", "green");
})

If you want a certain class to be colored green when landing on the page, you can call the $(document).ready() event which is included with jQuery and calls everything within its function as soon as the page has loaded correctly.

$(document).ready(function(){
    $(".mainoption").css("background-color", "green");
})

In order make sure that only one option is green at once, you can simply change the color of all the other options back to their defaults within these events as well just like explained in the examples above.

How do I make my javascript function change the color of my text?

Answers (1)

Related Questions