javascript getelementsByClassName - 未定義[]

Question

背景：このワードプレスプラグインをイベント予約用に購入しました。明らかに著者は、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]と、私が欲しいの要素を取得しますが、明らかではない - 結果は未定義です。

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を迅速にダーティボルトで解決しようとしている誰かが自分のコードでやっていたこと。

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>