动态生成按钮绑定类方法报错：button_action未定义的JS/HTML问题

我正在开发一款基于服务端数据自动生成HTML页面的应用，目前编写了如下代码：

//Indicator class
class Button_class{
    constructor(name)
    {
        this.buttonAva = false;
        this.name = name;
        this.buttonIdHTML = '"' + name + "But" + '"'
    }   
     button_action()
    {
         //This is an abstract method
        console.log("foo")
    }
    //This method creates the button
    create_Button()
    {
        //Make sure that the method is only executed once
        if (this.buttonAva == false)
        {
            //Get the element id
            root22 = document.getElementById('root');
            //create the HTML code
            let html ="<button id="+this.indicatorIdHTML +"type='button' onclick = 'button_action()/> Click Me!";
            root22.insertAdjacentHTML("beforeend", html);
            html = "<p>"
            root22.insertAdjacentHTML("beforeend", html);
        }
    }
}
//----------------------------------------------------------

//function for setting up the page
 function process_init(){
    for (let i = 0; i < data.Indicators.length; i++){
        //Create the HTML for the indicators
        let temp_indi = new Indicator(data.Indicators[i]);
        indicators.push(temp_indi);
        
        indicators.push(data.Indicators[i])
        //Build the HTML page
        indicators[i].create_Indicator()
        indicators[i].create_Button()
       }
 }

点击生成的按钮时出现错误：button_action is not defined，尝试使用this.button_action()调用也无效。请问这种方案在JS中是否可行？若可行该如何解决此问题？

这种方案完全可行，问题出在内联事件绑定的作用域以及代码里的细节错误上，具体修复步骤如下：

1. 替换内联onclick，用事件监听绑定实例方法 #

内联onclick的作用域是全局，无法直接访问类实例的方法。正确做法是创建按钮元素后，通过addEventListener绑定实例方法，同时提前固定this指向：

class Button_class{
    constructor(name)
    {
        this.buttonAva = false;
        this.name = name;
        this.buttonId = name + "But";
        // 绑定this指向，确保button_action执行时上下文是当前实例
        this.button_action = this.button_action.bind(this);
    }   
    button_action()
    {
        console.log("foo", this.name); // 现在可以正常访问实例属性
    }
    create_Button()
    {
        if (!this.buttonAva)
        {
            const root = document.getElementById('root');
            // 创建按钮DOM元素，避免拼接HTML字符串的风险
            const button = document.createElement('button');
            button.id = this.buttonId;
            button.type = 'button';
            button.textContent = 'Click Me!';
            // 绑定点击事件
            button.addEventListener('click', this.button_action);
            
            root.appendChild(button);
            root.appendChild(document.createElement('p'));
            this.buttonAva = true; // 标记已创建，防止重复执行
        }
    }
}

2. 修复原代码中的其他逻辑错误 #

• 原代码中this.indicatorIdHTML是未定义属性，属于笔误，上面的方案已改用直接设置元素id，无需拼接字符串
• process_init函数存在逻辑问题：
  • 实例化的Indicator类与定义的Button_class不匹配，需统一类名
  • 重复执行indicators.push会同时推入实例和原始数据，导致后续调用方法出错
    修正后的process_init示例：

const indicators = [];

function process_init(){
    // 假设data是服务端返回的有效数据对象
    for (let i = 0; i < data.Indicators.length; i++){
        const temp_btn = new Button_class(data.Indicators[i]);
        indicators.push(temp_btn);
        // 若存在create_Indicator方法，需确保当前类包含该实现
        // temp_btn.create_Indicator();
        temp_btn.create_Button();
    }
}

3. 为什么内联this.button_action()无效？ #

内联onclick里的this指向的是按钮DOM元素本身，而非Button_class的实例，因此无法调用实例的方法。而通过addEventListener并提前绑定this，可以确保方法执行时的上下文是当前类实例。

内容的提问来源于stack exchange，提问作者Alex