onclick属性没有被注册

Question

const googleDiv = function(){ 

    const container = document.createElement('div'); 
    const btnEle = document.createElement('button'); 
    btnEle.type = "button"; 
    btnEle.className = "link-btn"; 
    btnEle.appendChild(document.createTextNode("(Unlink)")); 
    btnEle.onclick = "unlinkGoogle()"; 
    container.appendChild(btnEle); 
    container.id = "google-linked-container"; 
    return container; 
}; 

当我通过这个方法创建一个按钮，按钮出现在DOM没有问题，按钮类型和类是预期的，但没有onclick属性。为什么？

P.S. btnEle.addEventListener("click",() => { console.log("clicked!"); });也不起作用。

更新 我复制了它的jsfiddle：https://jsfiddle.net/fs1xhgnm/2/

Answer 1

您应该分配您的处理程序作为一个功能，而不是字符串。此外，尝试在追加元素后分配onclick处理程序。

container.appendChild(btnEle); 
btnEle.onclick = unlinkGoogle; 

Answer 2

你需要传递给函数的引用，或者用的onclick，或更好的addEventListener

const googleDiv = function() { 
 

 
    const container = document.createElement('div'); 
 
    const btnEle = document.createElement('button'); 
 
    btnEle.type = "button"; 
 
    btnEle.className = "link-btn"; 
 
    btnEle.appendChild(document.createTextNode("(Unlink)")); 
 
    btnEle.addEventListener('click', unlinkGoogle); 
 
    container.appendChild(btnEle); 
 
    container.id = "google-linked-container"; 
 

 
    return container; 
 
}; 
 

 
function unlinkGoogle() { 
 
    console.log('clicked'); 
 
} 
 

 
document.body.appendChild(googleDiv());

Answer 3

你分配一个字符串作为功能。您可以使用addEventListener。

这是一个JSFiddle来解释我的意思。