javascriptpolymerpolymer-2.xvaadin-flow

Javascript function inside polymer is not a function error


I have a javascript function defined in polymer as such: myTest(arg) {<do stuff here>}

Inside this function, based on some conditions, I want to change the onclick of a button defined in the polymer template to some other function. For this I'm doing document.getElementById('myButton').onclick = function() {myTest('someArg')};

The problem I'm having is that when the above line gets invoked I'm getting an error

Uncaught TypeError: myTest is not a function.

If I try to use the function keyword when declaring the function the compiler complains with

Unexpected token. A constructor, method, accessor, or property was expected.

What's the correct syntax to for changing the button's onclick function?


Solution

  • It's hard to say for sure without seeing the the full source code example, but it sounds like the problem you're facing is related to JavaScript not inferring this as the context for calling instance methods in the same way that e.g. Java does. To make things more complicated, this wouldn't have the expected value inside the function that you create for the click listener.

    One way around that would be to use an arrow function since they aren't redefining the execution context:

    document.getElementById('myButton').onclick = () => { this.myTest('someArg') };
    

    Another alternative is to explicitly capture this into a separate variable and then use that variable inside the function:

    var self = this;
    document.getElementById('myButton').onclick = function() { self.myTest('someArg') };