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. btnEle.addEventListener("click",() => { console.log("clicked!"); });도 작동하지 않습니다.

업데이트 내가 JSFiddle에 복제 한 : https://jsfiddle.net/fs1xhgnm/2/

Answer 1

대신 문자열, 함수로 핸들러를 할당해야합니다. 또한 요소가 추가 된 후에 onclick 핸들러를 지정하십시오.

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

Answer 2

당신은 어느 온 클릭으로 함수에 대한 참조를 전달해야하거나 더 나은하여 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이 있습니다.