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があります。