このエラーについて教えてください。

Question

let controllers = document.querySelectorAll(".controller");
controllers[0].addEventListener(
  "click",
  function() {
    controllers.classList.add(".current");  
// error   Cannot read property 'add' of undefined
  },
  controllers[1].addEventListener(
    "click",
    function() {
      console.log("hghg2");
    },
    controllers[2].addEventListener("click", function() {
      console.log("hghg3");
    })
  )
);

controllers[0].addEventListener(
"click",
function() {
controllers.classList.add(".current");
// error Cannot read property 'add' of undefined
},
この記述でクラスを付与しようとした時に、このようなエラーがでました。
これの解決の仕方がわからないのでご教授お願いします。

Answer 1

controllersに入っているのはquerySelectorAllの戻り値なので、ElementではなくNodeListです。

Element の querySelectorAll() メソッドは、与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (生きていない) NodeList を返します。

Document.querySelectorAll() | MDN

ですから、controllers[0].classList.add("current")といった感じで、配列のように添え字をつけるなどして扱ってください。

Comments

[hsd]

回答いただきありがとうございます！
無事、クラス付与することができました。

ありがとうございました。

Answer 2

controllers.classList.add(".current");

controllersは配列なので、classListというものはありません。
そのため、無いものにaddなんて無いぞってエラーになるわけです。

Elementを指定する必要があるので、添字をつけるなどが必要です。

Answer 3

＞ controllers[0].addEventListener(
"click",
function() {
controllers.classList.add(".current");
// error Cannot read property 'add' of undefined
},

controllersはNodeListですよね？
そもそもclassListを持っていないのでは？
それとクラスを追加するときにピリオド付きのクラス名は微妙・・・

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var controllers = document.querySelectorAll(".controller");
  controllers[0].addEventListener("click",function() {
    [].forEach.call(controllers,function(x){
      x.classList.add("current");
    });
  });
});
</script>

<div class="controller">c1</div>
<div class="controller">c2</div>
<div class="controller">c3</div>

Answer 4

https://qiita.com/takeharu/items/d75f96f81ff83680013f

addなんてしらんぞこのやろーって怒られてます。

Listに値を追加するのはJavaならaddですが、
javascriptならpushじゃなかったですっけ？

---

あ～なんか違いますね、普通のListじゃないんですね～よく読んでませんでした。

https://developer.mozilla.org/ja/docs/Web/API/Element/classList

例をみると".クラス名" じゃなくて "クラス名" として入れてますが
それでもエラーは出たままですか？

---

他の方も回答してくれてますね。
確かに配列から.classListをとってそこに値を追加してくれ～なんて無理な話なので、
for文回したり、値を付けたい要素を指定して.add()を使わないといけないっぽいですね
console.log()などで中身を見てみるとわかりやすいですよ

Comments

[hsd]

回答いただきありがとうございます！
一応参考にしたサイトのURLを貼らせていただきます。
▽URL
http://shanabrian.com/web/javascript/add-class.php

javascriptもaddでいけるはずらしいのですが、、、
初心者なので知識がまだついてないのでお願いします。

[hsd]

最初”クラス名”でエラーがでてしまい、”.クラス名”でやり直したところ同じエラーで怒られました。

[hsd]

教えていただきありがとうございます。
今回から、活用してみます！

[azuapricot]

解決したようで何よりです