Trying to make a popup javascript class

Question

I am having trouble trying to do a click function inside the javascript class, "this.overlay.style.display = 'block'" not working due to "this" because "this" refers back to the click event i assume? what should i do to overcome this obstacle? i can console.log(options.overlay.id) outside of the click event, but inside the click event it will be undefined. what is the optimal solution for this?

    var popup_overlay = document.getElementById("popup_overlay"),
            update_coins = document.getElementById("update_coins");

// POPUP CLASS
    var Popup = function (options) {
        console.log(options.overlay.id); //THIS WORKS
        this.overlay = options.overlay;
        this.button = options.button;

        this.button.addEventListener("click", function(e){
//            this.overlay.style.display = 'block';
           alert(e.target.getAttribute('data-popup')); 
        });

    };

    var popup_update_coins = new Popup(
            {
                overlay: popup_overlay,
                button: update_coins
            }
    );

user_383904 · Answer

You could use Arrow function

// POPUP CLASS
var Popup = function(options) {
  console.log(options.overlay.id); //THIS WORKS
  this.overlay = options.overlay;
  this.button = options.button;

  this.button.addEventListener("click", (e) => { // Arrow function
    this.overlay.style.display = 'block';        // this === Popup
    alert(e.currentTarget.getAttribute('data-popup')); // currentTarget
  });

};

var popup_overlay = document.getElementById("popup_overlay"),
  update_coins = document.getElementById("update_coins");
  
var popup_update_coins = new Popup({
  overlay: popup_overlay,
  button: update_coins
});

#popup_overlay {
  display: none;
}


asdasd

Trying to make a popup javascript class

1 Answers