0

What is the recommended way to access the instance of a class and its methods from, say a DOM button? Consider this example: Right now I am calling a static method of an ES6 class, because I don't know how to call the instance method:

<script src="MyClass.js">
<button onClick="MyClass.buttonClicked()">

The class looks like

   class MyClass() {
    
       static instance;
    
       constructor() {
         instance = this;
         //important initialization of some vars
       }
    
       static buttonClicked() {
          MyClass.instance.nonStaticButtonClicked();
       }
    
       nonStaticButtonClicked() {
         console.log("button clicked!");
         //use the vars which have been initialized in constructor()
       }
    
    }

This works flawless in Chrome and not at all in Safari, because apparently Safari doesn't like the static variable declaration and gives the error "Unexpected token '='. Expected a ')' or a ',' after a parameter declaration.', see also the comment of Marthinus Engelbrecht here: SyntaxError: Unexpected token '='. Expected a ')' or a ',' after a parameter declaration.' in safari

My question is, if what I do is wrong, how should I do it right? In particular, what is the best approach to access an instance method from a button?

EDIT: I was just overcomplicating things:

window.addEventListener("load", function() {
    window.myClass = new MyClass();
});

and the button:

<button onClick="window.myClass.nonStaticButtonClicked()">

No need for static calls and instances/singletons. Thanks everyone.

poshtad
  • 25
  • 1
  • 6
  • `static` should work on Safari: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static This looks right, as far as how to use a static class method. – sleep furiously Sep 30 '20 at 16:00
  • 2
    It appears you misunderstand what a class is used for, what an instance of that class is and how to use it. A static method is JUST a plain function that is named scoped to a class. A static method does not use an instance of the class at all. If you want to use a non-static method, you have to create an instance of the class by calling your constructor with `new`, save it somewhere and then use that instance to call a method as in `obj.method()` where `obj` is the instance of your class that you created and saved. – jfriend00 Sep 30 '20 at 16:01
  • sleep furiously, I added the Safari error in question. – poshtad Oct 01 '20 at 09:51
  • Thank you jfriend, but the question was: How do I access `obj.method()` from the DOM? Thanks for teaching me `new` though ;) – poshtad Oct 01 '20 at 09:56
  • 1
    Check the next answer, scroll to the bottom answers to find the ones showing how to create a singleton class and call its methods without needing to use static, although you will find some examples using static too if this is your requirement: https://stackoverflow.com/questions/1479319/simplest-cleanest-way-to-implement-singleton-in-javascript – PerracoLabs Oct 01 '20 at 10:02
  • Thank you PerracoLabs, that was the right hint. I edited the question. – poshtad Oct 01 '20 at 11:15

0 Answers0