JavaScript绑定click点击事件后无法禁用button按钮问题求助

问题背景 #

预期实现点击按钮后添加列表项同时禁用按钮的效果，其余功能运行正常，仅按钮禁用逻辑未生效，核心JS代码如下：

let ul = document.getElementById("list");
let buttonFirst = document.getElementById("Button1");
let itemArray = [];

buttonFirst.addEventListener("click", function (event) {
  event.preventDefault();
  itemArray.push("Chocolate Cake");
  let li = document.createElement("li");
  li.innerHTML = "Chocloate Cake";
  ul.appendChild(li);
  buttonFirst.disabled = true;
  console.log(itemArray);
});

注：上述代码中li.innerHTML赋值的内容存在拼写错误，"Chocloate Cake"正确拼写为"Chocolate Cake"

问题原因 #

该问题由JS事件绑定与HTML结构不匹配导致：如果JS代码执行时按钮DOM尚未加载完成，或没有正确关联点击事件处理逻辑，会导致addEventListener没有绑定到真实的按钮元素上，因此修改disabled属性的逻辑无法触发。

已验证解决方案 #

在HTML按钮标签中添加对应点击函数的方案可正常解决问题，也可以将JS代码放在DOM加载完成后执行，参考实现如下：

<button id="Button1">添加巧克力蛋糕</button>
<ul id="list"></ul>

<script>
// 确保DOM加载完成后再执行JS逻辑
document.addEventListener('DOMContentLoaded', function() {
  let ul = document.getElementById("list");
  let buttonFirst = document.getElementById("Button1");
  let itemArray = [];

  buttonFirst.addEventListener("click", function (event) {
    event.preventDefault();
    itemArray.push("Chocolate Cake");
    let li = document.createElement("li");
    li.innerHTML = "Chocolate Cake";
    ul.appendChild(li);
    buttonFirst.disabled = true;
    console.log(itemArray);
  });
})
</script>

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