정철민 질문함 1년 전
var upatedBtns = document.getElementsByClassName(‘장바구니업데이트’)
를 통해서 버튼 클릭 시, 장바구니업데이트라는 클래스를 지닌 element들을 get해오는 것 같은데 이러한 버튼이 한 document에 여러개가 있잖아요? 근데 어떻게 버튼을 클릭한것만 딱 데이터를 가져올 수 있는걸까요?
getElementByID로 해야하는 거아닌가요?
user 스탭 답변함 1년 전
getElementById() 함수는 ID 속성으로 특정 element를 선택하는 함수입니다. 따라서, ID가 고유한 값이기 때문에 한 문서 내에서 중복되는 ID 값이 있다면 잘못된 사용입니다.
반면에, getElementsByClassName() 함수는 클래스 속성으로 특정 element들을 선택하는 함수입니다. 클래스 속성은 ID와 달리 여러 element에 중복해서 사용할 수 있습니다.
따라서 보신 부분이 앞으로 강의 진행상 중복되어 문제가 된다면 수정될 수 있는 부분이 될 수 있는 부분일 수 있습니다.
전체 소스는 다음과 같습니다.
https://github.com/shop2world/ultrashop
네, 여러 개의 버튼이 동일한 클래스 이름을 가질 때, 이를 이용해서 getElementsByClassName() 함수를 사용하여 해당 클래스 이름을 지닌 모든 버튼 element들을 가져올 수 있습니다.
그리고 이 element들 각각에 클릭 이벤트를 바인딩하여, 클릭 이벤트가 발생할 때 해당 버튼에 대한 정보를 추출하여 서버에 전송하는 등의 작업을 할 수 있습니다.
예를 들어, 각 버튼에 대해 클릭 이벤트 핸들러 함수를 등록할 때, 해당 함수의 첫 번째 인자로 이벤트 객체(event)를 받아옵니다.
그리고 이 이벤트 객체를 이용하여, 클릭한 버튼 element의 정보를 추출할 수 있습니다. 예를 들어, 다음과 같은 코드를 작성할 수 있습니다.
var updatedBtns = document.getElementsByClassName(‘장바구니업데이트’);
for (var i = 0; i < updatedBtns.length; i++) {
updatedBtns[i].addEventListener(‘click’, function(event) {
var btn = event.target; // 클릭된 버튼 element
var product_id = btn.dataset.product; // 데이터 속성으로 제품 ID 추출
var action = btn.dataset.action; // 데이터 속성으로 액션 추출
console.log(‘product_id:’, product_id, ‘action:’, action);
});
}
위 코드는, ‘장바구니업데이트’ 클래스 이름을 지닌 모든 버튼 element들에 대해, 클릭 이벤트 핸들러 함수를 등록합니다. 클릭 이벤트가 발생하면, 이벤트 객체의 target 속성을 이용하여 클릭된 버튼 element를 가져온 다음, 해당 element의 데이터 속성(data-* 속성)을 이용하여 버튼에 대한 정보를 추출합니다. 이 정보를 이용하여, 서버에 데이터를 전송하거나, 다른 작업을 수행할 수 있습니다.