window.onclick = function(event) only works for first item

Question

Here is a jsfiddle of my complete code, where you can test the functionality of the two modals. Clicking outside the second modal closes it, while clicking outside the first modal does not close it.

I have two modal pop-up windows on an HTML page, and after they're opened, they can be closed by clicking outside of the modal with this code:

// When user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

For some reason, this code only works for the second (last) instance of it in my script.js file. You can see that there are really just two blocks of code in this file: the first controls the first modal, and the second controls the second modal. Each instance of the code above is at the end of the block.

// Get modalCompanies
var modalCompanies = document.getElementById('companiesModal');

// Get button that opens the modalCompanies
var btnCompanies = document.getElementById("companiesOpen");

// Get <spanCompanies> element that closes the modalCompanies
var spanCompanies = document.getElementsByClassName("close")[0];

// When user clicks on the button, open the modalCompanies 
btnCompanies.onclick = function() {
    modalCompanies.style.display = "block";
}

// When user clicks on <spanCompanies> (x), close modalCompanies
spanCompanies.onclick = function() {
    modalCompanies.style.display = "none";
}

// When user clicks anywhere outside of the modalCompanies, close it
window.onclick = function(event) {
    if (event.target == modalCompanies) {
        modalCompanies.style.display = "none";
    }
}



// Get modalPrivacy
var modalPrivacy = document.getElementById('privacyModal');

// Get button that opens the modalPrivacy
var btnPrivacy = document.getElementById("privacyOpen");

// Get <spanPrivacy> element that closes the modalPrivacy
var spanPrivacy = document.getElementsByClassName("close")[1];

// When user clicks on the button, open the modalPrivacy 
btnPrivacy.onclick = function() {
    modalPrivacy.style.display = "block";
}

// When user clicks on <spanPrivacy> (x), close modalPrivacy
spanPrivacy.onclick = function() {
    modalPrivacy.style.display = "none";
}

// When user clicks anywhere outside of the modalPrivacy, close it
window.onclick = function(event) {
    if (event.target == modalPrivacy) {
        modalPrivacy.style.display = "none";
    }
}

What is preventing the window.onclick = function(event) { } function at the end of each block from being functional in both blocks?

Possible duplicate of [How to call multiple JavaScript functions in onclick event?](https://stackoverflow.com/questions/3910736/how-to-call-multiple-javascript-functions-in-onclick-event) — Robert Moskal, Jul 29 '17 at 20:08
Why do you have two `window.onclick` functions in your jsfiddle... the you are no doubt over writing the first one hence it never executing. I would suggest you give those elements a `class` as this will save you having to write the same function multiple times but for different elements. — NewToJS, Jul 29 '17 at 20:09
Strange. The `alert` fires when it's in the second `onclick` — rpivovar, Jul 29 '17 at 20:12
@coffeebot that isn't strange at all. the first onclick function no longer existing because the second one is over writing it. As I have suggest above, use a class name so you can have those function run for multiple elements. This will save repeating source code with very minor differences. — NewToJS, Jul 29 '17 at 20:14
@coffeebot You are very welcome :) Simple mistake to make and we seem to learn best from some mistakes. — NewToJS, Jul 29 '17 at 20:22

score 28 · Accepted Answer · answered Jul 29 '17 at 20:13

28

use

window.addEventListener("click", function(event) {
});

instead of

window.onclick = function() {
}

https://jsfiddle.net/qsL76mx6/

answered Jul 29 '17 at 20:13

Maxim Kuzmin

2,574
19
24

score 5 · Answer 2 · answered Jul 29 '17 at 20:12

5

second 'onclick' event rewrite the first one. use element.addEventListener()

answered Jul 29 '17 at 20:12

alen

276
2
9

score 3 · Answer 3 · answered Jul 29 '17 at 20:53

You defined window.onclick twice in the script, so the first one is overwritted by the later one. Try to move the two actions into one window.onclick, like this:

window.onclick = function(event) {
  if (event.target == modalCompanies) {
      modalCompanies.style.display = "none";
  }

    if (event.target == modalPrivacy) {
        modalPrivacy.style.display = "none";
    }
}

score 2 · Answer 4 · answered Jul 29 '17 at 20:15

Your second window.onclik overriding the first one, you could just combine both and use logic to hide different modals.

// Get modalCompanies
var modalCompanies = document.getElementById('companiesModal');

// Get button that opens the modalCompanies
var btnCompanies = document.getElementById("companiesOpen");

// Get <spanCompanies> element that closes the modalCompanies
var spanCompanies = document.getElementsByClassName("close")[0];

// When user clicks on the button, open the modalCompanies 
btnCompanies.onclick = function() {
    modalCompanies.style.display = "block";
}

// When user clicks on <spanCompanies> (x), close modalCompanies
spanCompanies.onclick = function() {
    modalCompanies.style.display = "none";
}



 // Get modalPrivacy
var modalPrivacy = document.getElementById('privacyModal');

// Get button that opens the modalPrivacy
var btnPrivacy = document.getElementById("privacyOpen");

// Get <spanPrivacy> element that closes the modalPrivacy
var spanPrivacy = document.getElementsByClassName("close")[1];

// When user clicks on the button, open the modalPrivacy 
btnPrivacy.onclick = function() {
    modalPrivacy.style.display = "block";
}

// When user clicks on <spanPrivacy> (x), close modalPrivacy
spanPrivacy.onclick = function() {
    modalPrivacy.style.display = "none";
}

// When user clicks anywhere outside of the modalPrivacy, close it
window.onclick = function(event) {
    if (event.target == modalPrivacy) {
        modalPrivacy.style.display = "none";
    }
    if (event.target == modalCompanies) {
        modalCompanies.style.display = "none";
    }
}

/*modal background*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/*modal box*/
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 5px solid #f9cdcd;
    width: 80%; /* Could be more or less, depending on screen size */
}

.modal-content p{
 font-family: 'Open Sans', sans-serif;
 font-size: 14px;
}

/*close button*/
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

         <span id="companiesOpen">click companies</span>
         
         <!--companies modal-->
            <div id="companiesModal" class="modal">

              <!--modal-->
              <div class="modal-content">
                <span class="close">&times;</span>
                <p>test 1</p>
              </div>

            </div>
            
            <span id="privacyOpen">click privacy</span>
            
            <!--privacy modal-->
            <div id="privacyModal" class="modal">

              <!--modal-->
              <div class="modal-content">
                <span class="close">&times;</span>
                <p>test</p>
              </div>

            </div>

window.onclick = function(event) only works for first item

4 Answers4

Linked