添加点击事件以隐藏弹出窗口

Question

I have a popup with an id of myPopup .
show is a class that changes the display from none to block.
This is my first time using event handlers and I was looking to get some information on the different types and how to use them.

var popup_v = document.getElementById("myPopup");

function popup() {
    popup_v.classList.toggle("show");
}
if(document.getElementById('myPopup').classList.contains("show")) {
    document.addEventListener('click', function(event) {
        popup_v.classList.remove("show");
    });
}

Answer 1

var popup_v = document.getElementById("myPopup");

function popup() {
    popup_v.classList.toggle("show");
}
if(document.getElementById('myPopup').classList.contains("show")) {
    document.addEventListener('click', function(event) {
        popup_v.classList.remove("show");
    });

So first of all your if statement will only run once and since the class is only toggled during the function, then the if statement will never be run and so the event won't actually happen. To fix this maybe try this approach:

var popup_v = document.getElementById("myPopup");

var trueorfalse = false;

function popup() {
    if (trueorfalse === false) }
     trueorfalse = true; // popup is there
     popup_v.classList.toggle("show");
    } else {
     popup_v.classList.remove("show");
    }
}
if(document.getElementById('myPopup').classList.contains("show")) {
    document.addEventListener('click', function(event) {
        popup_v.classList.remove("show");
    });

OR

var popup_v = document.getElementById("myPopup");

function popup() {
    popup_v.classList.toggle("show");
}
var trueorfalse = false;
document.addEventListener('click', function(event) {
 if (trueorfalse === false) }
  trueorfalse = true; // popup is there
  popup_v.classList.toggle("show");
 } else {
  popup_v.classList.remove("show");
 }
}
};

I did it these ways because the event listener just checks if the event is happening for how long the application (site) is run.

So you can just check if the class is there or not and then decide depending on that.

Tell me if anything is wrong.

Answer 2

I don't see a need to add the if condition specifically to check if it contains class and it it has remove it.

the toggle method should do both for you, ie on toggle add show class, on toggle again if show class is present remove it

check this example for reference - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_class