Calling a JS "onclick function" multiple times within a modal

Question

I am trying to figure out how to use the same function
(closing a modal when clicking out of the modalbox):

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

and

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

within to different modals.

Right now, only the onclick funktion "modalBtc" works the way it should.

I don't have a clue how to bring the first function "modalEth" to life.

It would be great if someone could help me out with a solution.

HTML (1. ModalEth, 2. ModalBtc)

<div id="myModalEth" class="modalEth">
<div class="modal-contentEth">
<p>some content</p>
</div>
</div>

<div id="myModalBtc" class="modalBtc">
<div class="modal-contentBtc">
<p>some content</p>
</div>
</div>

Use `addEventListener` https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener — Coli, Apr 08 '18 at 10:40
how would that work in my specific case? thank you very much! — Trrrrrrrrrr, Apr 08 '18 at 10:45
related: https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick — Patrick Evans, Apr 08 '18 at 10:51

score 0 · Answer 1 · answered Apr 08 '18 at 10:57

document.getElementById('myModalEth').addEventListener('click', function(event) {
    this.style.display = "none";
}
document.getElementById('myModalBtc').addEventListener('click', function(event) {
    this.style.display = "none";
}

This hides the modal when the user clicks inside the modal.

Calling a JS "onclick function" multiple times within a modal

1 Answers1