Javascript variable changes value itself

Question

So, I am writing a code for my webpage that if you have one of two boxes open (registration, login) you can't open another one. I'm stuck with the following problem: once you close the box with pressing the mouse out of the box, value changes to 1 and you should be able to open the box again but all of a sudden it sets itself to 0 and you can't open the box anymore.

IF you close the box with CLOSE button, you CAN open the box again but not with pressing outside the box.

At the start of JS file I declare var openable and set value to 1.

var openable = 1; 

Code for closing with CLOSE button:

$("#closeReg").click(function(){
    openable = 1;
    console.log(openable);
    $('#register').css('display','none');
    $("#register").siblings().css("opacity", "1");
});

Code for pressing out of box:

var subject = $("#register");
if(e.target.id == subject.attr('id')){
    subject.fadeOut();
    subject.siblings().css("opacity", "1");
    openable = 1;
    console.log(openable);  
} 

Code for opening the box:

$("#regButton").click(function(){
    console.log(openable);
    if(openable == 1){
    $("#register").fadeIn();
    $("#register").siblings().css("opacity", "0.5");
    openable = 0;
    console.log(openable);
    }
});

Whole code: https://pastebin.com/vC461VGy

Answer 1

 var openable = 1; $("#closeReg").click(function() { openable = 1; console.log(openable); $('#register').css('display', 'none'); $("#register").siblings().css("opacity", "1"); }); $("#regButton").click(function() { console.log(openable); if (openable == 1) { $("#register").fadeIn(); $("#register").siblings().css("opacity", "0.5"); openable = 0; console.log(openable); } }); $('body').click(function(e) { if ($(e.target).closest('#register').length <= 0 && !$(e.target).is('#closeReg') && !$(e.target).is('#regButton')) { $('#closeReg').trigger('click'); } }); 

 #register { background-color: #FFAAAA; } body { height: 200px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="closeReg">Close</button> <button id="regButton">Open</button> <div id="register"> register box </div> 

Here, try this sample.

Your code for hiding when clicking outside was not working correctly, mainly because e is undefined and even if we consider it to be a click event your test was wrong.

The main difficulty is to detect the click outside the box without detecting the click that opens it, or you will end up opening and closing at the same time. Hence why I added the two tests to make sure the targets aren't buttons that handle specific behaviors.

Also, instead of doubling the code to close the modal, I have made it so when you click anywhere, it triggers a click on the close button, that way only one event is to be kept up to date. Note that this could also be do-able by creating your own event instead but meh...