[JavaScript] 반복되는 모든 버튼에 이벤트 리스너를 등록하기

 

<div class="textarea-box">
     <p id="detailIndex" style="display: none" th:text="${plan.index}"></p>
     <textarea id="textareaValue" th:text="${plan.memo}">memo</textarea>
     <button id="textareaBtn" type="button">저장</button>
</div>

여러 개의 .textarea-box 클래스가 있는 경우, querySelector() 메서드는 문서 내에서 첫 번째 .textarea-box 요소만 선택하게 됩니다. 따라서 첫 번째 버튼에만 이벤트 리스너가 등록되는 것입니다.

모든 버튼에 이벤트 리스너를 등록하려면 .textarea-box 클래스를 가진 모든 요소를 선택한 후에 각각의 요소에 이벤트 리스너를 등록해야 합니다. 이를 위해서 querySelectorAll() 메서드를 사용하여 모든 .textarea-box 클래스를 가진 요소를 선택하고, 각 요소에 대해 반복문을 사용하여 이벤트 리스너를 등록해야 합니다.

아래는 모든 .textarea-box 클래스를 가진 요소에 대해 이벤트 리스너를 등록하는 코드입니다.

 

 

const textareaBoxes = document.querySelectorAll('.textarea-box');

textareaBoxes.forEach(textareaBox => {
    const textareaBtn = textareaBox.querySelector('#textareaBtn');

    textareaBtn.addEventListener("click", function () {
        const detailIndex = textareaBox.querySelector('#detailIndex').textContent;
        const textareaValue = textareaBox.querySelector('#textareaValue').value;

        const xhr = new XMLHttpRequest();
        const formData = new FormData();
        formData.append("index", detailIndex);
        formData.append("patchMemo", textareaValue);

        xhr.open('PATCH', `/memo`);
        xhr.onreadystatechange = () => {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    alert('업데이트 성공');
                } else {
                    alert('업데이트 실패');
                }
            }
        };
        xhr.send(formData);
        console.log('변경할 인덱스 번호 : ' + detailIndex);
        console.log('변경할 메모 내용 : ' + textareaValue);
    })

});