JQueryからネイティブJSへの書き換えでのエラー。

Question

非jQueryに書き換えてJSを勉強している最中なのですが、

  $('.list-trigger_category').on('click', () => {
    $('.list-trigger_category_on').toggleClass('active');
    return false;
  });

上記のコードを下記に書き換えた時

on の代わりに addEventListener を使用出来ると思うのですが。

Uncaught TypeError: click.addEventListener is not a function

とエラーが出てしまいます。

  let click = document.getElementsByClassName('list-trigger_category'),
  on = document.getElementsByClassName('list-trigger_category_on');

  click.addEventListener('click', () => {
    on.classList.toggle('active');
  }, false);

色々記述方法を変えているのですが、中々解決しないためご教示いただけると助かります。

Answer 1

getElementsByClassNameは、関数名(Elements)の通り、戻り値がelementではなく複数系(NodeList)となるため、直接addEventListenerすることはできません。

以下の様に書き換えれば動作するのではないかと思います。

let click = document.getElementsByClassName('list-trigger_category'),
  on = document.getElementsByClassName('list-trigger_category_on');
Array.from(click,  e => {
  e.addEventListener('click', () => {
    Array.from(on, e => e.classList.toggle('active'));
  }, false);
});

Comments

[退会済みユーザー]

ClassだとElement"s"なんですね・・・
無事動きましたありがとうございます！

Answer 2

冗長にやるならこんな感じでどうでしょうか？
場合によってはprototypeで対応してもよいかもしれませんが

<style>
.active{
  background-Color:lime;
}
</style>
<script>
window.onload=function(){
var n1=document.querySelectorAll('.list-trigger_category');
for(var i=0;i<n1.length;i++){
  n1[i].addEventListener('click',function(){
    n2=document.querySelectorAll('.list-trigger_category_on');
    for(var j=0;j<n2.length;j++){
      var cn=n2[j].getAttribute("class");
      var reg=new RegExp("(^| )active(?= |$)");
      if(cn.match(reg)){
        cn=cn.replace(reg,"");
      }else{
        cn+=" active";
      }
      n2[j].setAttribute("class",cn.trim());
    };
  });
}
}
</script>


<input type="button" class="list-trigger_category" value="1"><br>
<input type="button" class="list-trigger_category" value="2"><br>
<input type="button" class="list-trigger_category" value="3"><br>

<div class="list-trigger_category_on">test</div>
<div class="list-trigger_category_on active">test</div>
<div class="active list-trigger_category_on">test</div>
<div class="active">test</div>