Call a class method from HTML

Question

How to call a method from the javascript class from html?

I not find solution for to call class method from html generated code using javascript.

I write small example for better understand.

<head>
    <script>
        function MyClass() {
            var self = this;

            this.init = function() {
            document.getElementById('list').innerHTML = this.mainTemplate();
            };

            this.mainTemplate = function () {
                return '<button id="start" class="btn btn-danger btn-lg" onclick="onStart()" type="button"> value </button>';
            };

            this.onStart = function onStart() {
                alert('bingo');
            };
        }
    </script>
</head>
<body>
    <div id ="list"> </div>
        <script>
            var a = new MyClass();
                a.init();
                //a.onStart();
        </script>
</body>

I have tried everything that comes to mind, like ...

onStart()
self.onStart()
this.onStart()
MyClass.onStart()
MyClass.prototype.onStart()
a.onStart
MyClass.onStart

`onclick="onStart()"` is not referencing `a.onStart()` – guest271314 Apr 11 '16 at 19:36 — guest271314, Apr 11 '16 at 19:36

score 2 · Accepted Answer · answered Apr 11 '16 at 19:48

onclick="onStart()" is not referencing a.onStart() , but this at onStart() would be window.onStart(), which if exists is not a.onStart.

You can substitute .addEventListener() for onclick event attribute attached to #start element at init() to add the click event to #start element after the element has been appended to document.

<head>
  <script>
    function MyClass() {
      var self = this;

      this.init = function() {        
        document.getElementById('list').innerHTML = this.mainTemplate();
        // attach `click` event to `#start` here, 
        // set `this.onStart` as `click` handler function reference
        document.getElementById("start").addEventListener("click", this.onStart) // or `self.onStart`
      };

      this.mainTemplate = function() {
        return '<button id="start" class="btn btn-danger btn-lg" '
               + 'type="button"> value </button>';
      };

      this.onStart = function onStart() {
        alert('bingo');
      };
    }
  </script>
</head>

<body>
  <div id="list"></div>
  <script>
    var a = new MyClass();
    a.init();
  </script>
</body>

vahanpwns · Answer 2 · 2016-04-11T20:08:48.013

You can bind to the body tag's load event pretty easily:

<body onload="a.onStart()">

It will wait until all the HTML has loaded in the body tag, but it wont wait for other files like images etc.

The object you want to use must be prepared first though, so move that script tag from the bottom into the head

However, I think I kind of missed the point. It seems like you want the event to fire when the button is clicked, not when the page loads.

In that case, it would be easier to manage later if you create an element and append it to an existing element instead of creating a string and replacing the html content of an existing element:

    <script>
    function MyClass() {
        var self = this;

        this.init = function() {
            document.getElementById('list').appendChild(this.mainTemplate());
        };

        this.mainTemplate = function () {
            button = document.createElement('button');
        //  button.id = "start";
            button.className = "btn btn-danger btn-lg";
            button.type = "button";
            button.innerHTML = " value ";
            button.addEventListener("click", this.onStart);

            return button;
        }
        this.onStart = function() {
            alert('bingo');
        };
    }

    </script>
    <div id ="list"> </div>
    <script>
        var a = new MyClass();
            a.init();
        //    a.onStart();
    </script>

http://codepen.io/t3hpwninat0r/pen/ONQQBP

This method allows multiple instances of the class with their own button.

[Don't use `onevent` HTML attributes.](http://stackoverflow.com/a/35093997/3853934) — Michał Perłakowski, Apr 11 '16 at 19:39
The question was to run the function from html. `onevent` attributes is the way to do that. I agree there are better alternatives, but they generally don't answer the question directly. — vahanpwns, Apr 11 '16 at 19:43
If a question asks how to make something stupid, you should just say "don't" and suggest an alternative. — Michał Perłakowski, Apr 11 '16 at 19:45

score -1 · Answer 3 · answered Apr 11 '16 at 19:41

-1

Change the line:

            this.onStart = function onStart() {

to just say:

        this.onStart = function() {

then call it with a.onStart() and it will work.

answered Apr 11 '16 at 19:41

jimboweb

4,362
3
22
45

Explain the downvote? As far as I can tell, the person asked how to call the onStart function and I answered that question. – jimboweb Apr 11 '16 at 19:48
I've just tested this and it works. why the downvote? http://codepen.io/t3hpwninat0r/pen/GZQQBV note: the button has `a.onStart()` on click – vahanpwns Apr 11 '16 at 19:48

Call a class method from HTML

3 Answers3