无法在 Polymer 中进行用户定义的函数调用

Question

I'm implementing my website using Polymer 3.0 . I'm creating buttons in javascript . And I want to call user defined function on-click of the button.

I have tried adding event listener but the function is getting invoked as soon as the page is loaded. I have tried calling the function in bu.onclick function but the function is not getting invoked

//My code below

import { PolymerElement, html } from "./node_modules/@polymer/polymer/polymer-element.js";

class MyPage extends PolymerElement {
  static get template() {
    return html`
           <!-- Some useful div elements -->
           <iron-ajax 
                auto
                url= // my url
                handle-as="json"
                on-response="response"
                on-error="_statusFailed"
                last-error="{{lastError}}"
                last-response="{{lastResponse}}"
                debounce-duration="300">
        </iron-ajax>
     `;
}

constructor()
{
    super(); 
}

response()
{
    let list = this.shadowRoot.querySelector('#list');
    let bu = document.createElement('button');

    bu.onclick=function()
    {
        let a= this.value;
        console.log('Button Value: '+a);
        this.buttonprocessor(a);
    };
    list.append(bu);
}

buttonprocessor(msg)
{
    //some code 
}

When I click on the button created, I'm getting the following error

Uncaught TypeError: this.buttonprocessor is not a function
 at HTMLButtonElement.bu.onclick

Thanks beforehand.

Answer 1

I think the error message is pointing to the right direction this.buttonprocessor is not defined. Switch your function with a arrow function and it should be fine cause then this will point to the right class.

bu.onclick=() => {
    let a= this.value;
    console.log('Button Value: '+a);
    this.buttonprocessor(a);
};

this within a function state always points to the function itself you could also solve this like that:

var that = this;
bu.onclick=function()
{
    let a= this.value;
    console.log('Button Value: '+a);
    that.buttonprocessor(a);
};