ASP.NET MVC项目动态生成DOM调用getElementById报null错误如何解决

• 核心触发点：你在动态生成元素的行内点击事件中，仅给ChangeColors传递了当前元素ID，调用CardButtonClick时未传递ID参数，该函数内部调用addtoList时传入的clicked_id为undefined，document.getElementById(undefined)返回null，读取innerText属性时就会触发类型错误。你能正常完成赋值是因为ChangeColors中可能也调用了一次addtoList且传入了正确ID，两次调用一次成功一次报错，所以出现功能正常但控制台抛错的现象。
• 次要潜在问题：生成的元素ID为纯数字格式（如示例中的12492），虽然HTML5支持该类ID，但若存在ID重复、旧浏览器兼容问题也可能偶发DOM查询失败。
• 你猜测的动态元素挂载问题不成立，$('#ProblemCards').html(s)方法可以正常把元素挂载到DOM中，不需要改用insertBefore或appendChild。

1. 修正行内事件传参 #

把动态生成元素的onclick属性修改为传入ID到CardButtonClick：

s += '<div class="container"><div class="card"><div class="card-body" onclick="ChangeColors(this.id); CardButtonClick(this.id)" id="' + result[i].value + '">' + result[i].name + '</div></div ></div>';

同时修改CardButtonClick函数，接收ID参数并传递给内部调用的addtoList。

2. 给addtoList增加空值防护 #

避免异常阻断后续函数执行，修改代码如下：

function addtoList(clicked_id) {
    // 非法参数直接返回，不抛错
    if (!clicked_id) return;
    const targetElement = document.getElementById(clicked_id);
    if (!targetElement) return;
    var ProblemLabel = targetElement.innerText;
    document.getElementById("ProblemSelectionMade").textContent = ProblemLabel;
}

3. （推荐）改用事件委托绑定点击事件 #

废弃行内onclick写法，用事件委托适配动态元素，避免传参疏漏：
首先修改动态生成逻辑，移除行内onclick：

success: function (result) {
    var s = '<div></div>';
    for (var i = 0; i < result.length; i++) {
        s += '<div class="container"><div class="card"><div class="card-body" id="' + result[i].value + '">' + result[i].name + '</div></div ></div>';
    }
    $('#ProblemCards').html(s);
},

然后在页面初始化代码中增加事件委托绑定：

// 绑定到页面加载时就存在的父容器#ProblemCards
$('#ProblemCards').on('click', '.card-body', function() {
    const currentId = this.id;
    ChangeColors(currentId);
    CardButtonClick(currentId);
});

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