JavaScript动态创建<li>元素时onclick事件无法传递元素ID至checkBoxHours函数的问题

我一眼就瞅出问题所在了——你给<li>设置ID的代码写错了！

错误根源 #

你这里用了错误的语法调用setAttribute：

listItem.setAttribute = ("id", listID);

setAttribute是DOM元素的方法，正确用法是直接传参数调用，不能加赋值号=。这行错误代码导致你的<li>元素根本没被设置上ID，点击时this.id自然是空值，checkBoxHours函数也就收不到预期的ID了。

修正方案 #

把设置ID的代码改成正确的方法调用：

listItem.setAttribute("id", listID);

另外还有两个小细节可以优化，让代码更规范健壮：

1. 给className赋值时补上分号：listItem.className = "courtTimesItem";
2. 推荐用addEventListener绑定点击事件（比直接赋值onclick更灵活，支持绑定多个事件）：

   listItem.addEventListener('click', function() {
       checkBoxHours(this.id);
   });
   

修正后的完整JavaScript代码 #

function changeHours() { 
    document.getElementById("courtTimes").replaceChildren(); 
    //Change hours 
    var sports = $('input[name="sports"]:checked').val();
    courtChecked = $('input[name="sportCourts"]:checked').val();
    dayChecked = $('input[name="daysRowItem"]:checked').val();
    var listID = "";
    for (const i in courtTimes[sports][courtChecked][dayChecked]) { 
        var hour = courtTimes[sports][courtChecked][dayChecked][i];
        var listItem = document.createElement("li");
        listID = "courtTimesItem" + i;
        // 修正setAttribute的调用方式
        listItem.setAttribute("id", listID);
        listItem.className = "courtTimesItem";
        listItem.onclick = function() { 
            checkBoxHours(this.id);
        }; 
        listItem.innerHTML = '<label><input type="checkbox" class="hoursCheckbox" name="courtTimesItem"><div style="margin-top: 0.75vh">' + hour + ':00</div></label>';
        document.getElementById("courtTimes").appendChild(listItem); 
    } 
}
function checkBoxHours(ab) { 
    document.getElementById("monthTxt").innerHTML += ab; //check if works 
}

修改后，<li>元素就能正确带上ID，点击时checkBoxHours也能收到对应的ID值了。

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