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

我正在使用Polymer 3.0实现我的网站。我正在javascript中创建按钮。我想在点击按钮时调用用户定义的函数

我已尝试添加事件侦听器，但该函数会在加载页面后立即被调用。 我已尝试在bu.onclick函数中调用该函数，但该函数未被调用

//下面是我的代码

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 
}

---

事先谢谢。

我认为错误消息指向了正确的方向。此按钮处理器未定义。用箭头函数切换你的函数，它应该是好的，因为这样会指向正确的类

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

函数状态中的这一点始终指向函数本身，您也可以这样解决：

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

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