最後にクリックされた<li>要素だけ色を変えたい

##やりたいこと

最後にクリックされた<li>のみの色を変更したいです。現在<li>の色を変更することはできたのですが、別の<li>に選択を変更すると、前回の選択で発生した色の変化が残ったままになってしまいます。

A0(li要素)をクリックした後にA1(li要素)をクリックすると以下のようになります。

A0(li要素)をクリックした後にA1(li要素)をクリックするとA1のみが色をかえるようにするにはどうすれば良いでしょうか。

回答よろしくお願いいたします。

###HTMLコード

<section class="container">
    <p id="position"></p>
    <ul id="choices"></ul>
    <div id="btn" class="disabled">Next</div>
</section>

###CSSコード

.container {
  width: 400px;
  margin: 8px auto;
  background: #fff;
  border-radius: 4px;
  text-align: center;
}

#choices {
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
}

#choices > li {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

#choices > li:hover {
  background: #f8f8f8;
}

#choices > li.select {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
  font-weight: bold;
}

###Jsコード

'use strict';
console.log('Hello World!')

window.onload = function(){
  const position = document.getElementById('position');
  const choices = document.getElementById('choices');
  const btn = document.getElementById('btn');

  const quizSet = [
    {q: '出発地', c: ['A0', 'A1', 'A2']},
    {q: '目的地', c: ['B0', 'B1', 'B2']},
  ];
  let currentNum = 0;
  let departureNum = 0;
  let directionNum = 0;

  function checkAnswer(li) { 
      if (li.textContent === quizSet[0].c[0]) {
        departureNum = 1;
        console.log(departureNum);
        li.classList.add('select');
      } else if (li.textContent === quizSet[0].c[1]) {
        departureNum = 2;
        console.log(departureNum);
        li.classList.add('select');
      } else if (li.textContent === quizSet[0].c[2]) {
        departureNum = 3;
        console.log(departureNum);
      } else if (li.textContent === quizSet[1].c[0]) {
        directionNum = 1;
        console.log(directionNum);
      } else if (li.textContent === quizSet[1].c[1]) {
        directionNum = 2;
        console.log(directionNum);
      } else if (li.textContent === quizSet[1].c[2]) {
        directionNum = 3;
        console.log(directionNum);
      }
      btn.classList.remove('disabled');
    }

  function setQuiz() {
    position.textContent = quizSet[currentNum].q;

    while (choices.firstChild) {
      choices.removeChild(choices.firstChild);
    }

    quizSet[currentNum].c.forEach(choice => {
    const li = document.createElement('li');
    li.textContent = choice;
    li.addEventListener('click', () => {
        checkAnswer(li);
    });
    choices.appendChild(li);
  });
  }
  setQuiz();

  btn.addEventListener('click', () => {
    if (btn.classList.contains('disabled')) {
      return;
    }
    btn.classList.add('disabled');

    currentNum++;
    setQuiz();
  });
}

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

回答1件

ベストアンサー

別の<li>に選択を変更すると、前回の選択で発生した色の変化が残ったままになってしまいます。

2回目以降に選択した際に、前回のclassが残っているのが原因だと思います。
1つの解決策として、選択する度にclassの状態を初期化すればやりたいことが実現できるかと思います。

js
1"use strict";
2console.log("Hello World!");
3
4window.onload = function() {
5  const position = document.getElementById("position");
6  const choices = document.getElementById("choices");
7  const btn = document.getElementById("btn");
8
9  const quizSet = [
10    { q: "出発地", c: ["A0", "A1", "A2"] },
11    { q: "目的地", c: ["B0", "B1", "B2"] }
12  ];
13  let currentNum = 0;
14  let departureNum = 0;
15  let directionNum = 0;
16
17  function checkAnswer(li) {
18    // selectクラスを取り除いて初期化
19    document.querySelectorAll("li").forEach(el => el.classList.remove("select"));
20    
21    if (li.textContent === quizSet[0].c[0]) {
22      departureNum = 1;
23      console.log(departureNum);
24      li.classList.add("select");
25    } else if (li.textContent === quizSet[0].c[1]) {
26      departureNum = 2;
27      console.log(departureNum);
28      li.classList.add("select");
29    } else if (li.textContent === quizSet[0].c[2]) {
30      departureNum = 3;
31      console.log(departureNum);
32      li.classList.add("select"); // 追加しました
33    } 
34    btn.classList.remove("disabled");
35  }
36
37  function setQuiz() {
38    position.textContent = quizSet[currentNum].q;
39
40    while (choices.firstChild) {
41      choices.removeChild(choices.firstChild);
42    }
43
44    quizSet[currentNum].c.forEach(choice => {
45      const li = document.createElement("li");
46      li.textContent = choice;
47      li.addEventListener("click", () => {
48        checkAnswer(li);
49      });
50      choices.appendChild(li);
51    });
52  }
53  setQuiz();
54
55  btn.addEventListener("click", () => {
56    if (btn.classList.contains("disabled")) {
57      return;
58    }
59    btn.classList.add("disabled");
60
61    currentNum++;
62    setQuiz();
63  });
64};
65