ログで怒られたのですが、どういう意味なのかわからないので教えてください。

Question

const controllers = document.querySelectorAll(".controller");

controllers.addEventListener("click", function() {
  controllers[0].style("transform", "translateX(960px)");
  controllers[1].style("transform", "translateX(0)");
  controllers[2].style("transform", "translateX(-960px)");
});

// controllers.addEventListener is not a function

controllersのインデックス番号を取得してcssを操作して動かしたいのですが、
上記のような怒られ方をします。
調べてもあまりよくわからないので、どなたかお教えください。

Comments

[azuapricot]

もう解決しているようですが、あなたの前回の質問でもほぼ同じ質問をしています
https://teratail.com/questions/171508

controllersはindexを指定しないと使えませんというのも前回の質問で教えてもらっているはずです。

もう一度よく見直してください。
質問するのは大変良いことですが、それを吸収せず同じことを繰り返し聞くのは良くないです。
復習しましょう。

[azuapricot]

動くコードをコピペして満足するようじゃいつまでたっても成長できません。
なんでだろう、どうしてこれは動かないんだろうとエラーの原因を理解するようにしてください。

[m.ts10806]

ほとんど同じ回答をしてしまったことを反省…
回答者も過去質問きちんと探さなきゃいけませんね

[hsd]

ご指摘ありがとうございます。
つど、コードの意味を理解して復習した上で、
同じ質問はしないよう気をつけます。

お手数をおかけして申し訳ございません。

Answer 1

querySelectorAllはNodeListという、対象となったエレメントの配列のようなものを返しますので、これ自体に直接addEventListenerすることはできません。

controllers[0]、controllers[1]、controllers[2]にそれぞれaddEventListenerするか、forなどで回してaddEventListenerしていくなどが必要です。

Comments

[hsd]

回答ありがとうございます！

早速、試してみます。

Answer 2

AllのついてないquerySelectorと混同してる感じですね。
各々のコントローラに対して個別にイベントを登録する必要があります。
例えばこんな感じ

const controllers = document.querySelectorAll(".controller");
const controllerStyles = ["translateX(960px)", "translateX(0)", "translateX(-960px)"];

controllers.forEach(function (it) {
  it.addEventListener("click", function() {
    controllerStyles.forEach(function (translate, i) {
      controllers[i].style("transform", translate);
    }
  });
});

なお、querySelectorAllはforEachを持っているはずなので基本的にはこの記述で良いのですが、
何故かIE11だけquerySelectorAllの結果として帰ってくるNodeListがforEachメソッドを所持していません。
実践的にはpapinianusさんの回答に寄せた方が良いですね。

Comments

[maisumakun]

中身でcontrollersの添字を参照していることを考えれば、querySelectorAllで間違いはないのかなと判断しました。

[miyabi-sun]

回答するボタンを押した瞬間に気が付きました(´・ω・`)

[hsd]

controllerStyles.forEach(function (translate, i) {
controllers[i].style("transform", translate);
}
ここのtranslateという引数はどのような意味があるのでしょうか。

[miyabi-sun]

これは単純にコントローラの各々にtransformをセットする箇所をループ文で書いただけです。

別にfor文で書いても良いのですが、
もし興味があるならArray.prototype.forEachを勉強してみてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Answer 3

Document.querySelectorAll()

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

に対し

EventTarget.addEventListener()

特定のイベントが対象に配信されるたびに呼び出される関数を設定します。 対象としてよくあるものは Element, Document, Window ですが、イベントに対応したあらゆるオブジェクトが対象になることができます (XMLHttpRequestなど)。

だからです。
Listはいわば配列です。
EventTargetに対するイベントは1つ1つ登録しなければなりません。
取得されたcontrollersをforなどでループして個々に登録すると良いでしょう。

Answer 4

検証してないけど、こんな感じ

[].forEach.call(document.querySelectorAll(".controller"),function(elm){
  elm.addEventListener("click", function() {
    controllers[0].style("transform", "translateX(960px)");
    controllers[1].style("transform", "translateX(0)");
    controllers[2].style("transform", "translateX(-960px)");
  });
});