JavaScriptのボタンによるトグル機能が上手く機能しない

年末のお忙しいところ失礼いたします。
html、css、javascriptで勤怠管理の打刻機能を作成しています。

javascriptによるactiveの切り替えが上手くいかず困っています。
「勤務開始」ボタンを押すと意図通りに「勤務終了」と「休憩開始」が
点灯してくれるのですが、次に「勤務終了」または「休憩開始」を押しても画面に変化がありません。
エラーも出ません。
「勤務終了」を押すと「勤務開始」が点灯し（「休憩開始」が消灯）、「休憩開始」を押すと「休憩終了」が点灯（「勤務終了」が消灯）するようにしたいです。

以下、コードです。


    <div class="container">
      <p class="greeting character">{{$user->name}}さんお疲れ様です！</p>
      <!--<form action="/" method="post">-->
      <button class="button start_working active" name="start_working">
        <p>勤務開始</p>
      </button>
      <button class="button end_working" name="end_working" disabled>
        <p>勤務終了</p>
      </button>
      <button class="button start_break" name="start_break" disabled>
        <p>休憩開始</p>
      </button>
      <button class="button end_break" name="start_break" disabled>
        <p>休憩終了</p>
      </button>
      <!--</form>-->
    </div>
  </main>
  <footer class="footer character">
    <small>Atte,inc.</small>
  </footer>
  <script>
    const startWorking = document.getElementsByClassName('start_working')[0];
    const endWorking = document.getElementsByClassName('end_working')[0];
    const startBreak = document.getElementsByClassName('start_break')[0];
    const endBreak = document.getElementsByClassName('end_break')[0];

    if (startWorking.className.includes('active')) {
      startWorking.addEventListener('click', () => { submitData(startWorking) });
    }
    if (endWorking.className.includes('active')) || startBreak.className.includes('active')) {
      endWorking.addEventListener('click', () => { submitData(endWorking) });
      startBreak.addEventListener('click', () => { submitData(startBreak) });
    }
    if (endBreak.className.includes('active')) {
      endBreak.addEventListener('click', () => { submitData(endBreak) });
    }

    function submitData(buttonClicked) {
      buttonClicked.disabled = true;
      buttonClicked.classList.toggle('active');
      if (buttonClicked == startWorking || buttonClicked == endBreak) {
        endWorking.disabled = false;
        startBreak.disabled = false;
        endWorking.classList.toggle('active');
        startBreak.classList.toggle('active');
      } else if (buttonClicked == endWorking) {
        startBreak.disabled = true;
        startBreak.classList.toggle('active');
        startWorking.disabled = false;
        startWorking.classList.toggle('active');
      } else if (buttonClicked == startBreak) {
        endWorking.disabled = true;
        endWorking.classList.toggle('active');
        endBreak.disabled = false;
        endBreak.classList.toggle('active');
      }
    }
</script>
</body>
コード

ページのイメージです。

どなたかアドバイスを頂ける方おられましたらご教示いただけると幸いです。

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

回答1件

ベストアンサー

JavaScript
1    if (endWorking.className.includes('active')) || startBreak.className.includes('active')) {
2      endWorking.addEventListener('click', () => { submitData(endWorking) });
3      startBreak.addEventListener('click', () => { submitData(startBreak) });
4    }
5    if (endBreak.className.includes('active')) {
6      endBreak.addEventListener('click', () => { submitData(endBreak) });
7    }

endWorkingとstartBreakとendBreakにイベントリスナーを設定しているのはここだけですが、activeクラスがついていないためif文の条件が偽になっており、イベントリスナーの設定が行われていませんね。なのでクリックしても何も起こらないというわけです。

あと、おそらくコードのコピペ時のミスかと思いますが、

JavaScript
1 if (endWorking.className.includes('active')) || startBreak.className.includes('active')) {

)が1つ多いです。

投稿2021/12/30 06:44

itagagaki

総合スコア8402

sasakiitacount

2021/12/30 13:49 編集

早速の回答ありがとうございます。 >activeクラスがついていないためif文の条件が偽になっておりコードについてなのですが、自分では「勤務開始」が押された後、 endWorking.classList.toggle('active'); startBreak.classList.toggle('active'); によってactiveをクラスにつけたつもりで、その結果として「勤務終了」と「休憩開始」が点灯される（CSSを省略していましたが、activeをクラスにつけることで点灯するようないなっています。説明不足ですみません。）と考えていたのですが、どこか間違っていたのでしょうか。 >)が1つ多いです。失礼しました。