Modal popup window with Javascript

Question

I have a clickable image that when you click a modal popup appears. I want to make sure you can only click it once and while the popup is showing, the clickable image is unclickable. I've tried several methods but no solution works as I want it to.

Here is the code:

init: function () {
    var myButton = document.getElementById("kaffePic"); 
    var clickable = true;
    console.log(clickable);

    myButton.onclick = function(e) {
        e.preventDefault();

        console.log(clickable);

        if(clickable)
        {
            clickable = false;
            popup(myButton, clickable);
        }
        else
        {
            return false;
        }
    };
}

And here is a part of the popup window (removed some code that has nothing to do with the issue).

function popup(theButton, returnClick) {
    var myDiv = document.createElement("div");
    myDiv.className = "popupWindow";

    var newButton = document.createElement('a');

    var image = document.createElement('img');                     
    image.src = 'img/theclosebutton.png';
    image.className = "popupImage";

    newButton.appendChild(image);

    myDiv.appendChild(newButton);

    newButton.onclick = function () {
        document.body.removeChild(myDiv);
        returnClick = true;
    };  
}

Right now I can click it once, and then never again.

Any suggestions?

Answer 1

it's called only once because clickable is set to false after the first click. i suspect you are trying to set it to true in your popup -method by calling returnClick = true; but all that does is setting your argument-value, not the actual clickable -variable itself.

right now, clickable is a variable in the scope of init , so popup can't access it. you could, for example, make clickable a var in the scope of init 's parent object. then in popup , you'd access clickable by parentObject.clickable .

//illustration of my example
parentObject {
  var clickable,
  function init()
}

function popup() {
  ...
  parentObject.clickable = true;
}

Answer 2

Check .one() event handler attachment of jquery and this the .one() of jquery is used to Attach a handler to an event for the elements. The handler is executed at most once per element per event type. second one is link to an stack overflow questions about resetting the .one().Hope this helps