スクロールバーが表示されるときに、ボタンをクリックするとfontawesomeのアイコンが変更されるようにしたい

Question

現状
clickするとスクールバーが左右に移動する。
クリックイベントでreplaceでクラス名を変更したいのですが、うまくいかず。
スピードもtransitionをcssにつけてもだめで
レクチャーいただければ幸いです。

<div class="l-table">
    <div class="js-scrollable p-scrollbar">
        <table class="p-table-search-theme">
            <thead class="has-background-thead">
                <tr class="thead">
                    <th class="sorting th-first" rowspan="2">登録<br>番号</th>
                    <th class="sorting th-second" rowspan="2">登録<br>番号</th>
                    <th class="sorting th-third" rowspan="2">技術名称</th>
                    <th class="th-fourth" rowspan="2">技術名称</th>
                    <th class="th-fifth" colspan="2">技術名称 </th>
                    <th class="sorting th-seventh" rowspan="2">技術名称</th>
                    <th class="sorting th-eighth" rowspan="2">技術名称</th>
                    <th class="th-ninth" rowspan="2">カタログ・パンフレット</th>
                </tr>
                <tr>
                    <th class="sorting-sc">農業農村<br>設備事業</th>
                    <th class="sorting-sc">その他<br>事業</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 0 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
                <tr>
                    <td> 1 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
                <tr>
                    <td> 2 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
                <tr>
                    <td> 3 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
                <tr>
                    <td> 4 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
                <tr>
                    <td> 5 </td>
                    <td class="text-left"><a href="#"> 株</a>
                    </td>
                    <td class="text-left"><a href="#">text</a></td>
                    <td class="text-left">text
                    </td>
                    <td>12648 件</td>
                    <td>12648 件</td>
                    <td>2021年</td>
                    <td>2021年/01</td>
                    <td><span class="icon"><a href="#">リーフレット(cs-21)</a></span><span class="icon"><a href="#">製品カタログ(cs-21シリーズ)</a></span></td>
                </tr>
            </tbody>
        </table>
<button type="button" class="c-scroll-button border-radius"><i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></button>
    </div>
</div>
<style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.0.0/css/scroll-hint.css">
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js" integrity="sha512-cyAbuGborsD25bhT/uz++wPqrh5cqPh1ULJz4NSpN9ktWcA6Hnh9g+CWKeNx2R0fgQt+ybRXdabSBgYXkQTTmA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

const buttonscroll = document.querySelector('.c-scroll-button');
const container = document.querySelector('.p-scrollbar');
 const caret = document.querySelector('.fa-chevron-right');
 const button = document.querySelector('.c-scroll-button');

buttonscroll.addEventListener('click', movement);


function movement() {
if (container.scrollLeft == 0) {
container.scrollLeft = container.scrollWidth;
} else {
container.scrollLeft = 0;
}
}


button.forEach((caret) => {
  button.addEventListener("click", () => {
    if (button.type === "caret") {
      caret.classList.replace("fa-chevron-right", "fa-chevron-left");
    } else {
      caret.classList.replace("fa-chevron-left", "fa-chevron-right");
    }
  });
});

サンプル
https://codepen.io/boo-jp/pen/ZEJvPEV

Answer 1

おそらく、movement()の挙動に合わせて、「ボタンを押すと右に動くときはボタン内に右矢印を表示、反対なら左矢印を表示したい」ということなんでしょう。こういう情報、質問文に書くべきだと思います。

コード内のbuttonscrollとbuttonは同じもののはずで、すでに movement() がクリックで呼ばれるようになっているのですから、クラス変更も movement() の中でやればよいでしょう。

• container.scrollLeft = container.scrollWidth を実行した場合は、それ以降は左にしか進めない → fa-chevron-right を fa-chevron-left に置き換える
• container.scrollLeft = 0 を実行した場合は、それ以降は右にしか進めない → fa-chevron-left を fa-chevron-right に置き換える

クラスを置換する対象は押されたボタンではなく、ボタンの子供要素で複数あるので、for (let caret of button.querySelectorAll('.fas')) { などでループする必要がありますね。

Comments

[KKsall]

for文はif文とはべつですかね？難しい。。
function movement() {
if (container.scrollLeft == 0) {
container.scrollTo({
left: container.scrollWidth,
behavior: "smooth", //behaviowプロパティでスムースに動くようにできる
});
for (let caret of button.querySelectorAll('.fas')) {
caret.classList.replace("fa-chevron-left", "fa-chevron-right");
}
} else {
container.scrollTo({
left: 0,
behavior: "smooth", //behaviowプロパティでスムースに動くようにできる
});
}
}

[int32_t]

else 側にも同じようなforループが必要です。

[KKsall]

function movement() {
if (container.scrollLeft == 0) {
container.scrollTo({
left: container.scrollWidth,
behavior: "smooth",
});
for (let caret of button.querySelectorAll('.fas')) {
caret.classList.replace("fa-chevron-left", "fa-chevron-right");
}
} else {
container.scrollTo({
left: 0,
behavior: "smooth",
});
for (let caret of button.querySelectorAll('.fas')) {
caret.classList.replace("fa-chevron-right", "fa-chevron-left");
}
}
}

変化がないですね。。なんか間違ってます？

[int32_t]

classList.replace()のパラメータが逆です。それ以外は大丈夫に見えます。

Answer 2

const button = document.querySelector('.c-scroll-button')とありますので、buttonはElement（またはnull）でしょう。
Elementには、forEachメソッドはないです。

NodeList.prototype.forEach() - Web API | MDN

querySelectorAllメソッドであれば、NodeListが返りますが、その場合はbutton.addEventListenerでエラーになるはずです。
問題がなければ、forEachを外してしまう方がわかりやすそうです。

まずは、DevToolsの使い方を覚えて、エラーメッセージを確認できるようになった方がいいでしょう。

---

ただ、button.type === "caret"については何をしたいのかがよくわかりませんでした。