修改onclick()事件绑定导致DOM元素克隆功能失效

实现点击按钮克隆元素3次的功能时，修改克隆元素的onclick事件绑定逻辑后，元素无法正常完成克隆。
涉及的核心代码如下：

var html = document.getElementById("kaart" + kaart_id).innerHTML;
kaart_id = kaart_id + 1;
var clone = document.createElement("div");
clone.innerHTML = html;
clone.id = "kaart" + kaart_id; 
clone.classList = "memory_kaart";
clone.onclick = kaart(kaart_id);
let tekst = clone.childNodes[1];
tekst.textContent = kaart_waarde;
tekst.id = "kaart" + kaart_id + "_tekst";
document.getElementById("memory_speelveld").appendChild(clone);
kaart_waarde = kaart_waarde + 1;

代码里有两处写法错误直接导致功能异常：

1. 事件绑定逻辑错误：clone.onclick = kaart(kaart_id); 这行代码不会给点击事件绑定回调，而是在代码执行到这一行时就立即调用kaart(kaart_id)函数，把函数的返回值赋值给onclick属性。如果kaart函数执行时涉及DOM操作、抛出错误，后续的元素插入、属性设置逻辑会直接中断，表现为元素克隆失效。
2. class属性赋值错误：classList是DOM元素的只读属性，直接给clone.classList赋值字符串不会生效，还可能在部分浏览器触发类型报错，中断后续代码执行。

• 改用classList.add()方法添加类名，或者直接通过className属性设置元素类。

修复后的核心代码片段：

var html = document.getElementById("kaart" + kaart_id).innerHTML;
kaart_id = kaart_id + 1;
var clone = document.createElement("div");
clone.innerHTML = html;
clone.id = "kaart" + kaart_id; 
// 修正类名添加逻辑
clone.classList.add("memory_kaart");
// 修正事件绑定，用箭头函数包裹，点击时才会执行kaart函数
clone.onclick = () => kaart(kaart_id);
// 如果需要在kaart中获取点击事件对象，可以写成下面这种形式
// clone.onclick = (e) => kaart(kaart_id, e);
let tekst = clone.childNodes[1];
tekst.textContent = kaart_waarde;
tekst.id = "kaart" + kaart_id + "_tekst";
document.getElementById("memory_speelveld").appendChild(clone);
kaart_waarde = kaart_waarde + 1;

如果需要更稳定的事件绑定，也可以用clone.addEventListener('click', () => kaart(kaart_id))代替直接给onclick赋值，支持绑定多个同类型事件，不会被后续的onclick赋值覆盖。

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