I am trying to decrease the opacity to only the selected element but it adds it to all Javascript

Question

I am trying to decrease the opacity to only the selected element but it adds it to all. I have a close button and once I click on it, I want to decrease the opacity of the whole parent element. However, all parent elements with the same class get their opacity decreased.

     (function() {
        document.querySelectorAll(".close").forEach(function(close) {
            close.addEventListener("click", function() {
                var card = document.getElementsByClassName("card");
                for (i = 0; i < card.length; i++) {
                    card[i].style.opacity = "0.3";
                }
            });
        });
    })
    ();

Scott Marcus · Accepted Answer

Your main problem is that you are looping over all the buttons within an event handler, when you should be setting up event handlers within a loop.

If you already have a reference to the close element, you don't need another loop to tie it to the corresponding card element it resides within, you can just use the DOM .closest() method to get the nearest ancestor that matches a selector.

Also, .forEach() is not supported in all browsers on the node list returned by .querySelectorAll(), so you should always convert that node list to an Array.

(function() {
  // Get all the close buttons and convert to an Array
  let closeButtons = Array.prototype.slice.call(document.querySelectorAll(".close"));

  // Loop over the array
  closeButtons.forEach(function(button) {
      
    // Set up a click event handler on each button
    button.addEventListener("click", function() {
        
      // The handler just needs to find the closest ancestor .card to the
      // current .close button that is being clicked (accessible via "this")
      // and change its style. The style should be already set up in a class
      this.closest(".card").classList.add("fade");
    });
  });
})();

/* Default styling of "close" buttons is hidden */
.card a.close {
  display:none;
}

/* When ancestor "card" is hovered, change display to shown */
.card:hover a.close{
  display:block;
  font-weight:bold;
}

/* Change the opacity of just the selected element */
.fade {
  opacity:.5;
}

/* ******************************** */


/*! normalize.css v1.1.0 | MIT License | git.io/normalize */

figure {
    margin: 0
}

a:link {
    text-decoration: none !important;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

html {
    font-size: 100%;
    font-family: sans-serif;
    height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: #f8f8f8;
}

#wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px;
    max-width: 980px;
    background: #fff;
    -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
}

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.headline {
    padding: 0 10px;
}

.headline .promoted-stories {
    font-weight: bold;
    color: #404040;
}

.headline .taboola-link {
    float: right;
}

.headline .taboola-link a {
    font-weight: 300;
    line-height: normal;
    text-align: right;
    color: #888888;
    font-size: 11px;
}

.cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.card {
    display: block;
    min-height: 1px;
    margin: 1%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 31.33333333%;
    flex: 0 0 31.33333333%;
    -webkit-box-shadow: 0px 0px 1px -2px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 0px 1px -2px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
    -webkit-transition: all .25s;
    transition: all .25s;
    position: relative;
}

.card:hover {
    -webkit-transform: translate(0, -2px);
    transform: translate(0, -2px);
    -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.card .thumbnail {
    display: block;
    height: 130px;
}

.card img {
    height: 100%;
    width: 100%;
    border: none;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.card-content {
    padding: 5px 10px 25px;
}

.card .card-content .card-title {
    margin: 5px 0 0 0;
    overflow: hidden;
    color: #000;
    font-weight: bold;
    max-height: 72px;
    font-size: .875rem;
    line-height: 1.5rem;
    text-decoration: none;
}

.card .card-content .category {
    color: #999999;
    font-size: 11.0px;
    font-weight: bold;
    text-decoration: none;
    margin: 5px 0 0 0;
    overflow: hidden;
    max-height: 52px;
}

.close {
    position: absolute;
    right: 15px;
    top: 5px;
}

.close:before,
.close:after {
    position: absolute;
    left: 0;
    right: 0;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #fff;
}

.close:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


        
            Promoted stories
            Sponsored Links by Taboola
        
        
            
                
                
                    
                    
                
                
                    3 Reasons Why You Haven't Found Your Match Yet
                    Dating life
                

            

            
                
                
                    
                    
                
                
                    Harry And Meghan Announce Baby On The Way
                    Royals
                

            

            
                
                
                    
                    
                
                
                    Things Get Seriously Real As RuPaul Cast Open Up
                    Celebrities
                

            

            
                
                
                    
                    
                
                
                    A Tiger Collapsed In A Russian Circus Mid-Show
                    Circus
                

            

            
                
                
                    
                    
                
                
                    Engagement On The Cards For Jack And Dani
                    Dating life
                

            

            
                
                
                    
                    
                
                
                    Attwood Hits Back At Rumours Of Dani Dyer Fued
                    Gossip

I am trying to decrease the opacity to only the selected element but it adds it to all Javascript

Answers (1)

Related Questions