javascript innerHTML안의 속성에다가 addeventListener 추가하기

Question

const btn=document.getElementById('btn'); const input=document.querySelector('#input'); const textZone=document.getElementById('DisplayNote'); const save=document.querySelector("fa-solid fa-arrow-down"); btn.addEventListener('click',()=>{ var textArea = document.createElement('div'); textArea.classList.add('d-style'); textZone.appendChild(textArea); textArea.innerHTML=`

${input.value}

` ; var deleTe=document.querySelector(".delete"); deleTe.addEventListener("click", () =>{ textArea.remove(); });노트앱을 만들다가 문제가 생겨서요 ... 굵게 칠한부분을 보시면 되는데요. 노트를 추가하는 버튼을 누르는 순간 메모장이 나타나게 만들었어요. 그리고 그 메모장안에 삭제버튼과 수정버튼을 작동시키게 해야합니다. 일단 삭제버튼을 실행시키려고 하는데 그 삭제버튼은 innerHTML안에서 선언된거라 addEventListener을 작동시켜도 계속 삭제가 안되네요. 그리고var deleTe= document.querySelector('delete')도 해봤는데 안돼요... 그리고 class대신에 id로 바꿔서 var deleTe=document.getByidElement('delete')로 바꿔서 시도했는데도 안되네요...

하얀뼈 · Answer

addEventListener 쓰지말고 로 하면 해결입니다.

[object Object] · Answer

지금 상태에서 4번줄 하단에 console.dir(btn)해보세요. undefined 나온다면 js에서 query select가 html element보다 상단에 위치하게되면 선택이 되지 않습니다.스크립트를 html 아래로 위치시키시면 됩니다.

밤아홉시 · Answer

현재 컨테이너 역할을 textZone이 하네요. delete 버튼 말고 textZone에 리스너를 추가해서클릭된 엘리먼트에 따라 정해진 작업을 하도록 하세요.textZone.addEventListener('click', (event) &#61;> { const el &#61; event.target; // 클릭된 엘리먼트 ... });이벤트 위임으로 검색하면 좀 더 자세한 정보를 찾을 수 있습니다.

javascript innerHTML안의 속성에다가 addeventListener 추가하기

3개의 답변

#innerhtml 목록