Javascript singleton scope issue

Question

I have the following code:

var mySigleton = new function()
{
    this.count = 123;
    document.write("<div onclick='ShowCount();''>Click</div>");

    function ShowCount() {
        alert(this.count);    
    };
}();

I need to call the function ShowCount() from the onclick event of the div created by the document.write(). However, I'm getting an error that ShowCount is undefined. Also, the ShowCount event has to access a value defined inside the singleton.

Inline event handlers run in global scope. You can use the locally defined function if you use the DOM API to create the element. However, even if you did that, this inside ShowCount won't refer to your singleton. Just make count a local variable and have ShowCount access it. — Felix Kling
– Felix Kling, Commented May 16, 2017 at 17:22

Community · Accepted Answer · 2017-05-23 12:10:33Z

2

You need to make ShowCount() accessible from outside the constructor function. You can do this by attaching the function to a ShowCount property of the returned instance. You then would need to call mySingleton.ShowCount():

var mySingleton = new function()
{
    this.count = 123;
    document.write("<div onclick='mySingleton.ShowCount();'>Click</div>");

    this.ShowCount = function() {
        alert(this.count);    
    };
}();

Remark: This is just to demonstrate how to fix your implementation, but as already pointed out in the comments above, it is not good style.

A better implementation would create the element and attach its event handlers using the DOM API while avoiding document.write(). Also, your singleton is actually none, so better rename it to something else to avoid confusion (or implement a real singleton):

function myClass() {
  this.count = 123;
  
  // Create <div> and attach onclick handler:
  let div = document.createElement('div');
  div.textContent = 'Click';
  div.onclick = () => alert(this.count);
  document.body.appendChild(div);
};


let instance = new myClass();

Depending on your use-case, it might still be unusual to have a constructor function create DOM elements.

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered May 16, 2017 at 17:23

le_m

20.4k10 gold badges70 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bergi Over a year ago

Why not fix the implementation with the better style?

ihatemash Over a year ago

thanks for your answer. I agree it's not good style. But it is existing code and I can't refactor at the moment.

Badacadabra · Accepted Answer · 2017-05-16 17:38:02Z

1

What you are trying to achieve is unclear...

By the way, there are lots of possible implementations of the Singleton pattern in JavaScript. Here is a possible one, with an IIFE:

var showCount = (function () {
  var count = 123;
  document.body.innerHTML = '<div onclick="showCount();">Click</div>';
  
  return function () {
    alert(count);
  }
})();

answered May 16, 2017 at 17:38

Badacadabra

8,5357 gold badges33 silver badges54 bronze badges

Collectives™ on Stack Overflow

Javascript singleton scope issue

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related