javascript getelementsByClassName - undefined []

Question

背景：我买了这个WordPress插件的事件预订。很明显，作者觉得在添加超过1张票或申请优惠券后，价格更新等事情是不必要的，所以我正试图自己写一个快速而肮脏的解决方案。它收取的价格是正确的，但我认为人们在提交信用卡之前应该看到最终价格。您可以在行动中看到这里（只是尝试增加超过1票）https://hellbentbbq.ca/events/ultimate-pork/

我的快速和肮脏的黑客的做法是 1）观看的门票选择要更改 2）留意优惠券代码成功

我开始用＃1和试图获得以下工作：

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

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

我已经添加了刚才的console.log这样我就可以具体是什么，我选择理解，但出于某种原因，我可以似乎没有选择html集合中的任何项目？

我想我可以去：

document.getElementsByClassName（ 'EM-票选择'）[0]，得到我想要的元素，但显然不是 - 结果是不确定的。没有[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 

任何方向我哪里去错了赞赏。

我意识到，如果我可以通过ID选择元素会更容易，但ID是动态生成的，我真的只是试图在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>