Is there a way to make DOM Changes to a single element when there is multiple elements sharing the same classname?

Question

I am trying to create a menu for practice, that contains different categories of meals. (i.e breakfast, lunch, snacks, etc.) I am making this menu to where there are 8 rows that when one of them is clicked, it shows a previously hidden description about that particular item. I am having trouble implementing the JS behind showing the menu description. I am not sure if all of the rows need to have unique class names, but I am not sure exactly how to select one row when clicked and then produce the output for only that particular row. Here is my current code at the moment (Note: The description has not been created yet) Also, I am new to web development, so anything that would point me in the right direction, even if it's not a full answer will be helpful :)

HTML


        
            
                
                  Breakfeast
            
            
        
        
            
                
                     Entreés
            
            
        
        
            
                
                      Salads
            
            
        
        
            
                
                     Sides
            
            
        
        
            
                
                     Kid's Meals
            
            
        
        
            
                
                       Treats
            
            
        
        
            
                
                       Drinks
            
            
        
        
            
                
                    Dipping Sauces & Dressings

CSS

.section-menu {
  margin-top: 5%;
}

.option {
  width: 75%;
  margin: 0 auto;

  display: flex;
}

.option-container {
  width: max-content;
  display: flex;
}

.option-text {
  float: right;
  margin: auto;
  font-family: Apercu-light;
}

.dropdown-arrow {
  height: 60px;
  font-size: 22px;
  float: right;
  margin: auto;
  margin-right: 5%;
}

No JS yet, because my attempts have yielded no noticeable results.

phentnil · Accepted Answer

Elements do not need to have distinct class names, but you can use additional class names as needed and be as specific as needed when referencing elements with the specified class(es).

I recommend using the id attribute for distinct element selection to reference them in javascript using getElementById. Then use addEventListener to place a click eventListener on each of the

elements. You can select them all in JavaScript with getElementsByClassName or querySelectorAll, then apply event listeners in a forEach loop as follows.

Note: although options has a forEach method like an Array, it is actually an HTMLCollection

const options = document.querySelectorAll(".option");
options.forEach(function(option) {
  option.addEventListener("click", function(event) {
    var element = event.target;
    if (element.tagName === "IMG") {console.log(element.src);return;}
    console.log(event.target.textContent.trim());
  });
});


  
    
      
        Breakfeast
    
    
  
  
    
      
           Entreés
    
    
  
  
    
      
            Salads
    
    
  
  
    
      
           Sides
    
    
  
  
    
      
           Kid's Meals
    
    
  
  
    
      
             Treats
    
    
  
  
    
      
             Drinks
    
    
  
  
    
      
          Dipping Sauces & Dressings

Is there a way to make DOM Changes to a single element when there is multiple elements sharing the same classname?

Answers (1)

Related Questions