onclick触发delete_product报Uncaught ReferenceError未定义如何解决

错误根源 #

报错是作用域不匹配导致：

• delete_product函数定义在window.onload回调的局部作用域内，仅同作用域代码可调用
• 行内onclick触发事件时，默认从全局window作用域查找目标函数，无法访问局部作用域内的delete_product，因此抛出未定义报错。

解决方法 #

方案1：将函数暴露到全局作用域 #

二选一即可：

• 把delete_product函数定义移到window.onload外面
• 或者在window.onload内部的delete_product函数定义后，新增一行window.delete_product = delete_product手动挂载到全局

修改后代码示例：

<script type="text/javascript">
// 全局定义函数，行内onclick可直接调用
function delete_product(id){
    document.getElementById(id).remove();
}

window.onload = function() {
    var id_count = 1;
    var btn = document.getElementById("add_product");
    btn.addEventListener("click", function()
    {
        id_count += 1;
        document.getElementById("products_table").innerHTML +=
        `<tr id='${id_count}'>
            <td>${id_count}</td>
            <td><input type='text' class='form-control' name='name' id='name${id_count}' placeholder='Jane Doe'></td>
            <td><input type='number' class='form-control' name='count' id='count${id_count}' placeholder='jane.doe@example.com'></td>
            <td><input type='text' class='form-control' name='price_netto' id='price_netto${id_count}' placeholder='jane.doe@example.com'></td>
            <td class='input-group'><input type='text' class='form-control' name='vat_rate' id='vat_rate${id_count}' placeholder='jane.doe@example.com'>
                <span class='input-group-addon'>%</span>
            </td>
            <td><input type='text' class='form-control' name='price_brutto' id='price_brutto${id_count}' placeholder='jane.doe@example.com'></td>
            <td><button type='button' onclick='delete_product(${id_count})' class='btn btn-alert'>Usuń</button></td>
        </tr>`;
    }, false);
}
</script>

方案2：使用事件委托（更推荐） #

无需暴露全局函数，也不用写行内onclick绑定，直接给父表格绑定统一的点击事件处理删除逻辑，后续动态新增的行也能自动生效：

<script type="text/javascript">
window.onload = function() {
    var id_count = 1;
    var btn = document.getElementById("add_product");
    var productTable = document.getElementById("products_table");
    
    // 父容器绑定委托事件
    productTable.addEventListener("click", function(e) {
        // 判断点击元素为删除按钮
        if(e.target.classList.contains("btn-alert")) {
            // 获取当前行节点直接删除
            e.target.closest("tr").remove();
        }
    })

    btn.addEventListener("click", function()
    {
        id_count += 1;
        // 新增行不需要写onclick属性
        productTable.innerHTML +=
        `<tr id='${id_count}'>
            <td>${id_count}</td>
            <td><input type='text' class='form-control' name='name' id='name${id_count}' placeholder='Jane Doe'></td>
            <td><input type='number' class='form-control' name='count' id='count${id_count}' placeholder='jane.doe@example.com'></td>
            <td><input type='text' class='form-control' name='price_netto' id='price_netto${id_count}' placeholder='jane.doe@example.com'></td>
            <td class='input-group'><input type='text' class='form-control' name='vat_rate' id='vat_rate${id_count}' placeholder='jane.doe@example.com'>
                <span class='input-group-addon'>%</span>
            </td>
            <td><input type='text' class='form-control' name='price_brutto' id='price_brutto${id_count}' placeholder='jane.doe@example.com'></td>
            <td><button type='button' class='btn btn-alert'>Usuń</button></td>
        </tr>`;
    }, false);
}
</script>

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