buttonの子要素にクラスを付けたいがつかない

buttonの子要素に<i class="fas fa-chevron-right"></i>に.reflectをつけてアイコンをclickで反転させたいです。
親要素の<button type="button" class="c-scroll-button border-radius">にはクラスがつくのですが、<i class="fas fa-chevron-right"></i>にするとつきません。

<button type="button" class="c-scroll-button border-radius">
<i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i>
</button>

icon.querySelectorAll('.fas')
icon.addEventListener('click', function(){
 this.classList.toggle('reflect');
});

.c-scroll-button.reflect{
 transform: scale(-1, 1);
transition: transform 500ms ease-out;
}

行動規範の内容に同意します

回答2件

ベストアンサー

やりたいことは下記のようなことかな？

css
1.c-scroll-button i {
2  transition: transform 500ms ease-out;
3}
4.c-scroll-button i.reflect{
5  transform: scale(-1, 1);
6}

js
1const icons = document.querySelectorAll('.c-scroll-button i.fas');
2
3icons.forEach((icon) => {
4  icon.addEventListener('click', function(){
5    this.classList.toggle('reflect');
6  });
7});

それともこちらか？

css
1.c-scroll-button {
2transition: transform 500ms ease-out;
3}
4.c-scroll-button.reflect{
5 transform: scale(-1, 1);
6}

js
1const scrollButton = document.querySelector('.c-scroll-button');
2
3scrollButton.addEventListener('click', function(){
4  this.classList.toggle('reflect');
5});

正解は下記でした。

css
1.c-scroll-button i {
2transition: transform 500ms ease-out;
3}
4.c-scroll-button.reflect i {
5 transform: scale(-1, 1);
6}

スクリプトは上と同じ。

投稿2021/11/06 12:51

編集2021/11/06 13:20

hatena19

総合スコア33795

KKsall

2021/11/06 13:46 編集

あと少しで手が届きそうです！「それともこちらか？」の内容でclickで反転するのはアイコンだけでいいんですよね。アイコンの反転は最初のものでOKで、clickでの動きは2つ目のものでclickするたびにアイコンが反転する感じです

hatena19

2021/11/06 13:15

CSS を下記にしてください。 .c-scroll-button i { transition: transform 500ms ease-out; } .c-scroll-button.reflect i{ transform: scale(-1, 1); }

KKsall

2021/11/06 13:16

ありがとうございます！！できました

行動規範の内容に同意します

回答作ってる間に即効レスついてた＞＜

forEachのほうがスマートなので、hatena19さんの回答を支持します。
まぁ、私のはわかりやすいforでやったらこうなるよって感じで・・・

html
1<!DOCTYPE html>
2<html lang="jp">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
7        <meta name="format-detection" content="telephone=no">
8        <title>reflect test</title>
9        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
10        <style>
11            .c-scroll-button.reflect{
12                transform: scale(-1, 1);
13                transition: transform 500ms ease-out;
14            }
15        </style>
16    </head>
17    <body>
18        <button type="button" class="c-scroll-button border-radius">
19            <i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i>
20        </button>
21
22        <script>
23            var icon = document.querySelectorAll('.fas');
24            var iconLength = icon.length;
25            for (var i=0; i < iconLength; i++) {
26                icon[i].addEventListener('click', function(){
27                    this.classList.toggle('reflect');
28                });
29            }
30        </script>
31    </body>
32</html>

肝心なのは、querySelectorAllで引っ張ってくると要素の配列（複数個の要素の集合体）で
返ってくる。
そして、配列にはaddEventListenerは付けられないので、意図した動作にならなかった。
何がしかの方法で、要素１つ１つにaddEventListenerをくっつけてやる必要がある。

それをforでやるかfotEachでやるかの違いだけです。

投稿2021/11/06 13:01

編集2021/11/06 13:13