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來解釋我的意思。