CODEWITHSUNDEEP
javascript
endriu
endriu

Reputation: 15

how to apply same function to multiple divs

on this page (http://jodiaries.com/test/) I need to make a popup appear when I click on the red boxes. So far it works, I added the onclick = "div1" attribute to the red box (on the others = "div2", etc) and use this:

function showhide(divElement) { 
    var e = document.getElementById(divElement); 
    if(e.style.display == 'flex'){ 
        e.style.display = 'none'; 
    } else {
        e.style.display = 'flex'; 
    } 
}

for now the popup closes when I click again on the number, I would like to make it close by clicking anywhere outside that div/popup. I created another script (probably wrong) with this:

window.onload = function(){ 
    var divToHide = document.getElementById('div1'); 
    document.onclick = function(e){ 
        if(e.target.id !== 'div_block-286-119'){
            divToHide.style.display = 'none'; 
        } 
    }; 
};

but it works only on the first red box, not on the others (because I target only div_block-286-119).
How can I get it to work with all popups (i will add more as soon as everything works)?

thanks in advance!

Upvotes: 0

Views: 222

Answers (1)

Bulent
Bulent

Reputation: 3411

It's a bad idea to work with ids in your case, also in general. Instead of onclick="yourFunction()" use event listener. I didn't test the code down below, but it should work.

document.querySelectorAll(".crono-day-red").forEach(red => {
   red.addEventListener("click", () => showhide(red));
})

const showhide = red => {
  // I prefer to control styles by toggling classes.
  // IMO, it's easier, especially for multiple styles.
  red.closest(".ct-div-block").classList.toggle("popup-visible");
}

const closePopups = () => {
   window.addEventListener("click", () => {
      let clickedInside = event.target.classList.contains(".popup-visible")
                       || event.target.closest(".popup-visible)"
      if (clickedInside) {
        return;
      }
      document.querySelectorAll(".popup-visible").forEach(x => x.classList.remove("popup-visible"));
   })
}

window.onload = closePopups();

.ct-div-block .nove-gen-click { display: none }
.ct-div-block.popup-visible .nove-gen-click { display: flex }

All you need to do is to toggle "popup-visible" class by your functions.

I also noticed that you define popup styles in #div1 and #div2... Very bad practice.

EDIT AFTER COMMENT

To close currently open red box when you click the new one:

const showhide = red => {
  red.closest(".ct-section-inner-wrap")
     .querySelectorAll(".popup-visible")
     .forEach(x => x.classList.remove("popup-visible"));
  red.closest(".ct-div-block").classList.add("popup-visible");
}

Upvotes: 1

Related Questions