JavaScript引号嵌套问题：动态按钮传参异常求助

方案1：修复字符串拼接的引号问题 #

核心问题是你拼接onclick属性时，字符串类型的品牌名没加引号，浏览器把brand1当成了DOM元素（刚好按钮id就是这个），所以弹出[object HTMLButtonElement]。直接加引号报错是因为引号嵌套冲突，得转义：

修改按钮拼接的代码：

document.getElementById("demo").innerHTML += '<button id="' + brand + '" onclick="brandOnOff(\'' + brand + '\')">' + brand + '</button>';

这里用\'转义单引号，生成的HTML会是onclick="brandOnOff('brand1')"，就能正确传递字符串参数了。

另外注意原代码里的循环条件i < brands是错误的，brands未定义，应该改成rs.rows.length，否则循环无法正常执行：

for (let i = 0; i < rs.rows.length; i++)

方案2：用事件监听绑定点击（更推荐） #

拼接字符串写onclick容易踩引号的坑，还可能存在XSS风险，直接用addEventListener绑定事件更靠谱：

完整修正代码：

DB.transaction(function (tx) {
    tx.executeSql('SELECT * FROM TableA', [], function (tx, rs) {
        const demoContainer = document.getElementById("demo");
        for (let i = 0; i < rs.rows.length; i++) {
            const brand = rs.rows.item(i).name;
            const button = document.createElement('button');
            button.id = brand;
            button.textContent = brand;
            // 直接绑定事件，闭包保留brand的值
            button.addEventListener('click', function() {
                brandOnOff(brand);
            });
            demoContainer.appendChild(button);
        }
    }, function (tx, error) {
        console.log('SELECT error: ' + error.message);
    });
});

function brandOnOff(brandName) {
    alert(brandName);
}

这种方式不用纠结引号嵌套，直接通过闭包把brand变量传给点击事件，逻辑更清晰，也更安全。

问题根源说明 #

• 当品牌名是字符串（比如brand1），没加引号的brandOnOff(brand1)会被浏览器当成调用函数时传入名为brand1的变量，而页面里刚好有个id为brand1的按钮，浏览器就把这个按钮元素传进去了，所以弹出[object HTMLButtonElement]。
• 数字类型的品牌名（比如123）会被直接解析成数值，所以能正常弹出。

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