Class is not defined onClick event

Question

I use the new class syntax for JS. When I press a button, I want to call a method from a class. To archieve this, I set this method static.

class NoteController { // The controller class
    constructor() { // Initialization
        // ...
    }

    static CreateNote() { // The method to call - static
        // ....
    }
}




<!DOCTYPE html>
<html>

<head>

    // ....
    <script src="NoteController.js"></script> // Link the js file to the html file

</head>

<body>

    // ....
    <button type="button" id="btnCreateNote" onclick="NoteController.CreateNote()">Create</button> // call the method

</body>

</html>

When I click the button, it says, NoteController is not defined. I really do not get, what is wrong there.

A picture of my project folder:

Maybe this helps.

Is NoteController.js in the same folder were your HTML page is? What exact error are you getting? I'll bet my money on the file not being loaded on the HTML page. — ProgrammerV5
– ProgrammerV5, Commented Apr 5, 2017 at 12:29
Added a response and a working example. not separated on a file as in your structure but I hope it helps to understand what is missing in your working code. — ProgrammerV5
– ProgrammerV5, Commented Apr 5, 2017 at 12:43
Peter, did the solution I posted worked for you? If so could you please flag as the response? Thank you. — ProgrammerV5
– ProgrammerV5, Commented Apr 6, 2017 at 14:24

ProgrammerV5 · Accepted Answer · 2017-04-05 12:46:29Z

2

EDIT: Correction to make it static:

<script>
class NoteController { // The controller class
    constructor() { // Initialization
        // ...
        alert('constructor called');
    }

    static CreateNote() { // The method to call - static
        // ....
        alert('create note');
    }
}
//var nc=new NoteController();
//console.log(nc);
</script>


<button type="button" id="btnCreateNote" onclick="NoteController.CreateNote()">Create</button> // call the method

JSFiddle

This is the working example of your code:

<script>
class NoteController { // The controller class
    constructor() { // Initialization
        // ...
        alert('constructor called');
    }

    CreateNote() { // The method to call - static
        // ....
        alert('create note');
    }
}
var nc=new NoteController();
console.log(nc);
</script>


<button type="button" id="btnCreateNote" onclick="nc.CreateNote()">Create</button> // call the method

Working JSFiddle

edited Apr 5, 2017 at 12:46

answered Apr 5, 2017 at 12:42

ProgrammerV5

1,9722 gold badges12 silver badges23 bronze badges

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

5 Comments

Leonardo Chaia Over a year ago

The method should be static, called without an instance of the NoteController.

ProgrammerV5 Over a year ago

My bad, added a new example with static method.

Leonardo Chaia Over a year ago

I was testing the same thing, but if you move the JS code to the JS area in jsfiddle, it stops working, not sure why. Check this fiddle

ProgrammerV5 Over a year ago

If you use this syntax, even if it is on a different file, it works fine, test it locally. (take a look at the change in the JAVASCRIPT settings) jsfiddle.net/69b06hvj/3

Leonardo Chaia Over a year ago

Ha, scope issues. Jsfiddle is (by default) wrapping the JS tab in an onload function. By setting the 'no-wrap' load type it works. So the OP issue must be regarding how the js file is being loaded.

Hameed Syed · Accepted Answer · 2017-04-05 12:36:53Z

1

Since lack of information about NoteController.js,I assume that your NoteController.js has below code.

    function NoteController()
    {
    //variables
    //sub functions
   function CreateNote()
     {
      //code
     }
    }

So now you need to create the object of the function and call it.

<script src="NoteController.js"></script>
<script>
var _noteController=new NoteController();
</script>

<body>
    <button type="button" id="btnCreateNote" 
onclick="_noteController.CreateNote()">Create</button> 
</body>

answered Apr 5, 2017 at 12:36

Hameed Syed

4,3532 gold badges23 silver badges35 bronze badges

2 Comments

peterHasemann Over a year ago

No no, as you can see above, this is a full class :) It is a relatively new syntax

Hameed Syed Over a year ago

Just inspect the button element and check what is bind for onclick?And also how the NoteController is defined on the html rendered page.

VinoPravin · Accepted Answer · 2017-04-05 12:51:01Z

1

Include your class inside the <script> tags, So that the browser will identify the javascript code and execute it!

answered Apr 5, 2017 at 12:51

VinoPravin

9975 gold badges19 silver badges33 bronze badges

Collectives™ on Stack Overflow

Class is not defined onClick event

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related