如何向JavaScript动态生成的HTML按钮正确传递参数

运行代码抛出如下错误：

Uncaught SyntaxError: Unexpected end of input (at pop.html:25:50)

报错由两个问题共同导致：

• 引号嵌套冲突：拼接按钮HTML时，onclick属性外层用双引号包裹，属性内部调用document.getElementById()传参时又用了双引号，浏览器解析到内部第一个双引号就判定onclick属性提前结束，后续代码被截断，直接触发上述语法错误。
• 传参逻辑错误：就算引号问题修复，传给printBtnAdd的第二个参数是input DOM元素本身，不是输入框内的文本值，打印结果不符合预期。

方案1：最小改动修复 #

将内联事件里的双引号替换为HTML实体"避免解析冲突，同时给input元素增加.value属性获取输入文本，额外加.trim()清除文本前后多余空格，修改后的addBtnAdd函数如下：

function addBtnAdd() {
    document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd(document.getElementById(&quot;toConsole&quot;).textContent.trim(), document.getElementById(&quot;intext&quot;).value.trim())">Print in console</button>`
}

方案2：事件监听器绑定（推荐写法） #

彻底放弃内联事件拼接的写法，动态创建按钮元素后通过addEventListener绑定点击事件，从根源规避引号嵌套问题，可维护性更强，完整可运行代码如下：

<!DOCTYPE html>
<body>
    <table>
        <tr>
            <td id="toConsole"> Hi I would like to print this in console</td>
        </tr>
        <tr>
            <td><input type="text" id="intext"></td>
        </tr>
        <tr>
            <td id="btnAdd"></td>
        </tr>
    </table>

    <script>
        function addBtnAdd() {
            const printBtn = document.createElement('button');
            printBtn.textContent = 'Print in console';
            printBtn.addEventListener('click', () => {
                const targetText = document.getElementById("toConsole").textContent.trim();
                const inputValue = document.getElementById("intext").value.trim();
                printBtnAdd(targetText, inputValue);
            });
            document.getElementById("btnAdd").appendChild(printBtn);
        }

        function printBtnAdd(text, inputtext) {
            // 如需严格输出带单引号、逗号分隔的格式，替换为 console.log(`'${text}', '${inputtext}'`);
            console.log(text, inputtext);
        }
        addBtnAdd();
    </script>
</body>
</html>

填入内容"Hi"时的运行效果：

运行后控制台会输出预期结果，调整console.log的写法即可匹配'Hi I would like to print this in console', 'Hi'的格式要求。

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