Font Awesomeのiconをクリックして５パターンのアイコンに変化させたい。

前提・実現したいこと

font awesomeを使ってアイコンを使っています。クリックしたらアイコンが５パターン変更するようにしたいです。

該当のソースコード

JavaScript

HTML

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>todolist</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <header class="text-center text-light my-4"> <h1 class="mb-4">Todo List</h1> <form class="search"> <input type="text" class="form-control m-auto" name="search" placeholder="Search KeyWard"> </form> </header> <ul class="list-group todos mx-auto text-light"> </ul> <form class="add text-center my-4"> <label class="text-light">ADDING TASK</label> <input type="text" class="form-control m-auto" name="add" placeholder="New Text"> </form> </div> <script src="script.js"></script> </body> </html>

script

const addTask = document.querySelector('.add');
const list = document.querySelector('.todos');

const createTodoList = task => {
// HTML テンプレートを生成
const html = <li class="list-group-item"> <span>${task}</span> <i class="far fa-trash-alt delete fa-pull-right "></i> <i class="fas fa-battery-empty "></i> </li> ;

list.innerHTML += html;

}

addTask.addEventListener('submit', e => {
// デフォルトのイベントを無効
e.preventDefault();

// タスクに入力した値を空白を除外して格納
const task = addTask.add.value.trim();
if(task.length) {
    // Todo List の HTML を作成
    createTodoList(task);
    // タスクに入力した文字をクリア
    addTask.reset();
}

});
//２パターンのアイコンの切り替え可能。５パターンを作りたい。
list.addEventListener('click', e => {

if(e.target.classList.contains('fa-battery-empty')){
e.target.classList.replace('fa-battery-empty','fa-battery-quarter');
}else{
e.target.classList.replace('fa-battery-quarter','fa-battery-empty');
}
});

//削除機能
list.addEventListener('click', e => {
if(e.target.classList.contains('delete')){
e.target.parentElement.remove();
}
});

試したこと

２パターンのアイコンの切り替え可能。
list.addEventListener('click', e => {
if(e.target.classList.contains('fa-battery-empty')){
e.target.classList.replace('fa-battery-empty','fa-battery-quarter');
}else{
e.target.classList.replace('fa-battery-quarter','fa-battery-empty');
}
});

５パターンを作りたい。

２パターンのアイコンは、どっちかに切り替えれるということで今のコードで解決できるのですが、５パターンになるとarraysを使って複数分岐（if）を使って
やらんといかんとなるとこんがらがってしまって、
手詰まりになった次第です。

こちらのソースコードを参考。
https://teratail.com/questions/222969

２パターンしか出来ず、、、

補足情報（FW/ツールのバージョンなど）

全体のソースコードの参考サイト
https://qiita.com/__init__/items/d1c59c87808fc180c871

使用したいアイコン５種類

https://webllica.com/search-font-awesome-icon-by-japanese/

fa-battery-empty	fas	\f244	バッテリー 電池

fa-battery-full fas \f240 バッテリー電池
fa-battery-half fas \f242 バッテリー電池
fa-battery-quarter fas \f243 バッテリー電池
fa-battery-three-quarters fas \f241 バッテリー電池

kei344

2020/05/18 15:08

（質問文は編集できます）質問文のHTML/JavaScriptはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

takusabuwp

2020/05/18 15:32

失礼しました。コードブロックとバックオートを理解して意識して編集したいと思います。太文字の部分が問題のところなんですが、綺麗に整形しようとすると太文字が解除されるようで問題の部分が目立たなくなりそうなので、そのままにしてしまいました。２パターンのアイコンは、どっちかに切り替えれるということで今のコードで解決できるのですが、５パターンになるとarraysを使って複数分岐（if）を使ってやらんといかんとなるとこんがらがってしまって、手詰まりになった次第です。

kei344

2020/05/18 15:36

ここは「質問への追記・修正の依頼」ですので、「回答」ではありません。質問本文は編集することが可能なので、その依頼をしています。

takusabuwp

2020/05/19 10:24

何度も失礼しました。以後気を付けます<(_ _)>

kei344

2020/05/19 10:49

（再掲）質問本文は編集することが可能なので、その依頼をしています。

kei344

2020/05/19 10:50

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

takusabuwp

2020/05/19 13:31

まだ理解してない部分があり、まだまだ、編集不足を感じています。またつっこみどころがあったら、フォローお願いします。受付中よろしくないですね。了解です。

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

回答1件

ベストアンサー

アイコンは順番にループする前提です。

JavaScript
1const iconList = [
2  'fa-battery-empty',
3  'fa-battery-full',
4  'fa-battery-half',
5  'fa-battery-quarter',
6  'fa-battery-three-quarters',
7];
8
9list.addEventListener('click', e => {
10  const nowIndex = iconList.findIndex(icon => e.target.classList.contains(icon));
11  const nextIndex = (nowIndex + 1) % iconList.length;
12  e.target.classList.replace(iconList[nowIndex], iconList[nextIndex]);
13});