javascript getelementsByClassName - undefined []

Question

배경 : 이벤트 예약을 위해이 WordPress 플러그인을 구입했습니다. 분명히 저자는 1 장 이상의 티켓을 추가하거나 쿠폰을 적용한 후 가격 업데이트와 같은 일에 필요하다고 느끼지 않았으므로 신속하고 더러운 솔루션을 직접 작성하려고합니다. 청구하는 가격은 정확하지만 사람들이 신용 카드를 제출하기 전에 최종 가격을 확인해야한다고 생각합니다. 당신은) 내 신속하고 더러운 해킹 방법은 1이다 https://hellbentbbq.ca/events/ultimate-pork/

(단지 1 개 이상의 티켓을 추가해보십시오) 표를 주시 2를 변경하려면 선택) 성공을 위해 쿠폰 코드를 주시 여기에 행동에서 볼 수

나는 # 1에서 시작하여 작업에 다음을 얻기 위해 노력하고 있어요 : 난 그냥 내가 특별히 내가 선택하고 이해할 수있는 CONSOLE.LOG을 추가 한

`document.getElementsByClassName('em-ticket-select').onchange=function(){ updatePrice() }; 
console.log(document.getElementsByClassName('em-ticket-select')); 

function updatePrice(){ 
     price=document.getElementById('theprice'); 
     alert(price); 
} 
` 

을하지만, 어떤 이유로 내가 할 수있는 html 컬렉션의 항목 중 하나를 선택하는 것 같지 않습니까?

은 내가 갈 수 있다고 생각 :

document.getElementsByClassName ('EM-티켓 선택') [0] 분명히 내가 원하는 요소 만하지 얻을 - 결과는 정의되지 않습니다.

HTMLCollection[0] 
0 
: 
select#em-ticket-spaces-5.em-ticket-select 
em-ticket-spaces-5 
: 
select#em-ticket-spaces-5.em-ticket-select 
em_tickets[5][spaces] 
: 
select#em-ticket-spaces-5.em-ticket-select 
length 
: 
1 
onchange 
: 
() 
__proto__ 
: 
HTMLCollection 

내가 잘못 가고 위치에 어떤 방향을 감사 : [0] 여기에 콘솔에 로그인 한 것입니다없이.

ID로 요소를 선택할 수 있지만 ID가 동적으로 생성되면 JS에서 더러운 볼트를 만들어 재 작성하거나 해결하려고 시도하는 대신 JS를 더 빨리 처리하려고합니다. 다른 사람이 코드에서 수행 한 작업.

Answer 1

getElementsByClassName을 통해 반환 된 객체와 같은 배열에 이벤트 수신기를 연결하려면 루프를 통과시켜 각 수신기에 리스너를 연결하십시오.

var selects = document.getElementsByClassName('em-ticket-select'); 
 
function updatePrice(el) { 
 
    console.log(el.value); 
 
} 
 
for (var i = 0; i < selects.length; i++) { 
 
    selects[i].addEventListener('change',function() { 
 
    updatePrice(this); 
 
    }); 
 
}

<select class="em-ticket-select"> 
 
    <option>foo</option> 
 
    <option>bar</option> 
 
</select> 
 

 
<select class="em-ticket-select"> 
 
    <option>foo</option> 
 
    <option>bar</option> 
 
</select> 
 

 
<select class="em-ticket-select"> 
 
    <option>foo</option> 
 
    <option>bar</option> 
 
</select>