动态添加按钮的onClick事件未响应：analizador函数未定义问题

问题原因 #

你的代码存在两个关键问题：

• 内联onclick写法错误：你写的onclick="analizador"仅引用了函数对象，没有触发调用，正确写法应为onclick="analizador()"，但这还无法解决根本问题。
• 作用域不匹配：analizador定义在triviaA函数内部，属于局部作用域；而内联onclick会在全局作用域中查找函数，因此找不到该函数。

方案一：使用事件监听（推荐） #

放弃内联onclick，通过创建DOM元素并绑定事件监听的方式处理，既避免作用域问题，也符合现代JS开发规范：

let triviaA = () =>{
    divRespuestas.removeChild(botonA)
    
    // 定义处理函数
    function analizador() {
        alert('funciona')
    }

    let procesoA = (i,j) => {
        let p = preguntas_respuestas[i]
        bienvenida.innerText = p[j].p
        let r = p[j].r
        
        // 先清空容器
        divRespuestas.innerHTML = '';
        
        r.forEach(r_button => {
            const btn = document.createElement('button');
            // 注意：多个按钮不能用同一id，改用class
            btn.className = 'btn-opciones';
            btn.textContent = r_button;
            // 绑定事件监听
            btn.addEventListener('click', analizador);
            divRespuestas.appendChild(btn);
        });
    }
    procesoA(0,0)
}

方案二：将函数暴露到全局作用域（不推荐） #

如果坚持使用内联onclick，可以把analizador挂载到window对象上，使其成为全局函数：

let triviaA = () =>{
    divRespuestas.removeChild(botonA)
    
    // 挂载到window，变为全局函数
    window.analizador = function() {
        alert('funciona')
    }

    let procesoA = (i,j) => {
        let p = preguntas_respuestas[i]
        bienvenida.innerText = p[j].p
        let r = p[j].r
        
        // 修正onclick写法，加上调用括号，同时改用class避免重复id
        let r_html = r.map(r_button => `<button onclick="analizador()" class="btn-opciones">${r_button}</button>`)
        let r_string = r_html.join(' ')
        divRespuestas.innerHTML = r_string
    }
    procesoA(0,0)
}

额外提示 #

多个按钮使用同一个id不符合HTML规范，会导致后续DOM选择出错，建议统一改用class属性。

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