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, Apr 05 '17 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, Apr 05 '17 at 12:43
Peter, did the solution I posted worked for you? If so could you please flag as the response? Thank you. — ProgrammerV5, Apr 06 '17 at 14:24

ProgrammerV5 · Accepted Answer · 2017-04-05T12:46:29.193

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 05 '17 at 12:46

answered Apr 05 '17 at 12:42

ProgrammerV5

1,915
2
12
22

The method should be static, called without an instance of the NoteController. – Leonardo Chaia Apr 05 '17 at 12:44
My bad, added a new example with static method. – ProgrammerV5 Apr 05 '17 at 12:47
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](https://jsfiddle.net/69b06hvj) – Leonardo Chaia Apr 05 '17 at 12:49
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) https://jsfiddle.net/69b06hvj/3/ – ProgrammerV5 Apr 05 '17 at 13:10
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. – Leonardo Chaia Apr 05 '17 at 13:12

score 1 · Answer 2 · answered Apr 05 '17 at 12:36

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 05 '17 at 12:36

Hameed Syed

3,939
2
21
31

No no, as you can see above, this is a full class :) It is a relatively new syntax – peterHasemann Apr 05 '17 at 12:39
Just inspect the button element and check what is bind for onclick?And also how the NoteController is defined on the html rendered page. – Hameed Syed Apr 05 '17 at 12:43

score 1 · Answer 3 · answered Apr 05 '17 at 12:51

1

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

answered Apr 05 '17 at 12:51

VinoPravin

947
3
17
32

Class is not defined onClick event

3 Answers3

Linked