I don't recive any alert, no the page isn't cached and idkw it should set opacity of my register form to 0 or at least show me an alert, the rest of the code works so it isn't a typo before

window.onclick = function(event) {
    if (event.target.parentElement) {
        alert()
        if (!(event.target.matches(".box") || event.target.parentElement.matches(".box") || event.target.matches(".loginRegisterButtons"))) {
            registerForm.css("opacity", 0)
            registerForm.css("pointer-events", "none")
            loginForm.css("opacity", 0)
            loginForm.css("pointer-events", "none")
        }
    } else {
        alert()
        registerForm.css("opacity", 0)
        registerForm.css("pointer-events", "none")
        loginForm.css("opacity", 0)
        loginForm.css("pointer-events", "none")
    }
}
window.onclick = function(event) {
    if (event.target.parentElement && event.target.parentElement.parentElement && event.target.parentElement.parentElement.parentElement && event.target.parentElement.parentElement.parentElement.parentElement && event.target.parentElement.parentElement.parentElement.parentElement.parentElement) {
        alert()
        if (!(event.target.matches("#show-messages") || event.target.matches(".wrapper") || event.target.parentElement.matches(".wrapper") || event.target.parentElement.parentElement.matches(".wrapper") || event.target.parentElement.parentElement.parentElement.matches(".wrapper") || event.target.parentElement.parentElement.parentElement.parentElement.matches(".wrapper") || event.target.parentElement.parentElement.parentElement.parentElement.parentElement.matches(".wrapper"))) {
            $(".wrapper").css("display", "none")
            $(".wrapper").css("pointer-events", "none")
        }
    } else {
        $(".wrapper").css("display", "none")
        $(".wrapper").css("pointer-events", "none")
    }
}

CodePudding user response：

Rather than setting the click callback with window.onclick you should use .addEventListener() to add each listener to the window object. The way you have it the second time you set window.onlick it overwrites the first.

window.addEventListener('click', function(event){
  if (event.target.parentElement){
    alert()
    if (!( event.target.matches(".box") || event.target.parentElement.matches(".box") || event.target.matches(".loginRegisterButtons") ) ){
      registerForm.css("opacity",  0)
      registerForm.css("pointer-events", "none")
      loginForm.css("opacity",  0)
      loginForm.css("pointer-events", "none")
  }
} else {
  alert()
  registerForm.css("opacity",  0)
  registerForm.css("pointer-events", "none")
  loginForm.css("opacity",  0)
  loginForm.css("pointer-events", "none")
}
});


window.addEventListener('click', function(event){
  if (event.target.parentElement && event.target.parentElement.parentElement && event.target.parentElement.parentElement.parentElement && event.target.parentElement.parentElement.parentElement.parentElement && event.target.parentElement.parentElement.parentElement.parentElement.parentElement){
    alert()
    if (!(event.target.matches("#show-messages") || event.target.matches(".wrapper") || event.target.parentElement.matches(".wrapper") || event.target.parentElement.parentElement.matches(".wrapper") || event.target.parentElement.parentElement.parentElement.matches(".wrapper") || event.target.parentElement.parentElement.parentElement.parentElement.matches(".wrapper") || event.target.parentElement.parentElement.parentElement.parentElement.parentElement.matches(".wrapper"))){
      $(".wrapper").css("display", "none")
      $(".wrapper").css("pointer-events", "none")
    }
  } else {
    $(".wrapper").css("display", "none")
    $(".wrapper").css("pointer-events", "none")
  }
});