javascriptのif文処理が上手く機能しない。

laravel8.0で勤怠管理システムを作成しています。ど素人です。

html,css,javascriptで、勤怠管理の打刻機能のフロント側の処理をつくっているのですが、
javascriptが思ったように機能してくれません。
具体的には、"勤務開始"のボタンを押した後、"勤務終了"と"休憩開始"のボタンを押せるようにしたいのですが、アクティブにはなるものの、それらのボタンを押してもなんの変化もありません。
下記にコードを載せます。

HTML、CSS部分
※上手く処理されるか分からないところはコメントアウトしています。
基本的なところから上手くいきません。

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      font-weight: bold;
    }
  
    .character {
      color: #222222;
    }
  
    a {
      text-decoration: none;
      color: inherit;
    }
  
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      padding: 0 30px;
    }
  
    .nav_list {
      display: flex;
      list-style: none;
    }
  
    .nav_item:not(:last-child) {
      margin-right: 30px;
    }
  
    .container {
      background-color: whitesmoke;
      margin: 0 auto;
      width: 100vw;
      height: 80vh;
      position: relative;
    }
  
    .greeting {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%, 0);
      margin: 20px auto;
    }
  
    .button {
      display: inline-block;
      background-color: white;
      width: 300px;
      height: 100px;
      padding: 20px 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px auto;
      border-style: none;
    }
  
    .start_working {
      color: whitesmoke;
      transform: translate(-105%, -110%);
    }
  
    .end_working {
      color: whitesmoke;
      transform: translate(5%, -110%);
    }
  
    .start_breaketime {
      color: whitesmoke;
      transform: translate(-105%, 10%);
    }
  
    .end_breaketime {
      color: whitesmoke;
      transform: translate(5%, 10%);
    }
  
    .start_working.active {
      color: #222222;
    }
  
    .end_working.active {
      color: #222222;
    }
  
    .start_breaketime.active {
      color: #222222;
    }
  
    .end_breaketime.active {
      color: #222222;
    }
  
    .footer {
      display: flex;
      justify-content: center;
      margin: 10px;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <header class="header character">
    <h1>Atte</h1>
    <nav class="nav">
      <ul class="nav_list">
        <li class="nav_item"><a href="/">ホーム</a></li>
        <li class="nav_item"><a href="/date">日付一覧</a></li>
        <li class="nav_item"><a href="">ログアウト</a></li>
      </ul></nav>
  </header>
  <main>
    
  <div class="container">
  <p class="greeting character">{{$user->name}}さんお疲れ様です！</p>
  <!--<form action="/" method="post">-->
    <button class="button start_working active" name="sw"><p>勤務開始</p></button>
    <button class="button end_working" name="ew"><p>勤務終了</p></button>
    <button class="button start_breaketime" name="sb"><p>休憩開始</p></button>
    <button class="button end_breaketime" name="eb"><p>休憩終了</p></button>
  <!--</form>-->
  </div>
  </main>
  <footer class="footer character">
    <small>Atte,inc.</small>
  </footer>
（末尾省略）
コード

JavaScript部分

    const buttons = document.getElementsByClassName('button');
    for (let i  = 0; i < buttons.length; i++) {
      if (buttons[i].classList.contains("active")) {
        if (buttons[i].classList.contains("start_working") || buttons[i].classList.contains("end_breaketime")) {
          buttons[i].addEventListener('click', goAwayFromWork);
        } else /*if (buttons[i].classList.contains("end_working") || buttons[i].classList.contains("start_breaketime"))*/ {
          //if (i == 1) {
            buttons[i].addEventListener('click', endWorking);
          //} else if (i == 2) {
            //buttons[i].addEventListener('click', startBreaketime);
          //}
        }
      }
    }

    function goAwayFromWork() {
      this.classList.remove('active');
      document.getElementsByClassName('end_working')[0].classList.add('active');
      document.getElementsByClassName('start_breaketime')[0].classList.add('active');
    };

    function endWorking() {
      this.classList.remove('active');
      document.getElementsByClassName('start_working')[0].classList.add('active');
    };

    function startBreaketime() {
      this.classList.remove('active');
      document.getElementsByClassName('end_breaketime')[0].classList.add('active');
    };
  </script>
コード

次に作成中の画面を載せます。

どこがおかしいのかご教示いただけると幸いです。

int32_t

2021/11/30 13:38

「勤務開始」ボタンを押したときに動くコードはどれですか?

sasakiitacount

2021/12/01 14:10

ご質問ありがとうございます。直接的には以下のコードになります。 if (buttons[i].classList.contains("active")) { if (buttons[i].classList.contains("start_working") || buttons[i].classList.contains("end_breaketime")) { buttons[i].addEventListener('click', goAwayFromWork); function goAwayFromWork() { this.classList.remove('active'); document.getElementsByClassName('end_working')[0].classList.add('active'); document.getElementsByClassName('start_breaketime')[0].classList.add('active'); };

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

回答2件

ベストアンサー

動的にイベントリスナを付け外しするのはミスしやすいので避けことをおすすめします。かわりに、イベントリスナを最初から付けっぱなしにして、イベントリスナ内で状態をチェックして処理をするかどうか判断します。

この場合、active クラスの有無でチェックできますが、disabled 属性を適切に設定することでclickイベントの発生そのものを制御することができます。

例:

html
1    <button class="button start_working" name="sw"><p>勤務開始</p></button>
2    <button class="button end_working" name="ew" disabled><p>勤務終了</p></button>
3    <button class="button start_breaketime" name="sb" disabled><p>休憩開始</p></button>
4    <button class="button end_breaketime" name="eb" disabled><p>休憩終了</p></button>

js
1document.querySelector('.start_working').addEventListener(e => {
2  this.disabled = true;
3  document.querySelector('.end_working').disabled = false;
4  document.querySelector('.start_breaktime').disabled = false;
5});
6
7document.querySelector('.end_working').addEventListener(e => {
8  this.disabled = true;
9  document.querySelector('.start_working').disabled = false;
10  document.querySelector('.start_breaktime').disabled = true;
11});
12
13...
14
15

投稿2021/11/30 14:13

int32_t

総合スコア20845

sasakiitacount

2021/12/01 14:14

ご回答ありがとうございます。これほど、早く回答して頂けるとは思っていませんでした。しっかり理解できるまで、少し時間を頂けるとありがたいです。

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

イベントは最初に.active要素のみに指定されたので、ボタンを押してactiveのクラスを足しても、イベントは実行されません。

JavsScript
1    const start_work_btn = document.getElementsByClassName('start_working')[0];
2    start_work_btn.addEventListener('click', goAwayFromWork);
3
4    const end_work_btn = document.getElementsByClassName('end_working')[0];
5    end_work_btn.addEventListener('click', endWorking);
6
7    const start_break_btn = document.getElementsByClassName('start_breaketime')[0];
8    start_break_btn.addEventListener('click', startBreaketime);
9
10　　const end_break_btn = document.getElementsByClassName('end_breaketime')[0];
11
12    function goAwayFromWork() {
13      this.classList.remove('active');
14      document.getElementsByClassName('end_working')[0].classList.add('active');
15      document.getElementsByClassName('start_breaketime')[0].classList.add('active');
16    };
17
18    function endWorking() {
19      this.classList.remove('active');
20      document.getElementsByClassName('start_working')[0].classList.add('active');
21    };
22
23    function startBreaketime() {
24      this.classList.remove('active');
25      document.getElementsByClassName('end_breaketime')[0].classList.add('active');
26    };