ボタンを押したときの表示の変更

btn1Elのボタンを押した時に、「作業中」の場合は「完了」
「完了の場合は「作業中」と表示を切り替えたいです。
if文を使って作業中と完了を切り替えたいのですが、現状ではbtn1Elのボタンを押しても応答がなく、エラーもない状態です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4
5<head>
6  <meta charset="UTF-8">
7  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8  <meta http-equiv="X-UA-Compatible" content="IE=edge">
9  <title>ToDoリスト</title>
10  
11</head>
12
13
14<body>
15  <h1>ToDoリスト</h1>
16  
17  <div class="radiobutton">
18    <input type="radio" id="button-1" name="radio1" value="1" checked />
19    <label for="button-1">すべて</label>
20    <input type="radio" id="button-2" name="radio1" value="2" />
21    <label for="button-2">完了中</label>
22    <input type="radio" id="button-3" name="radio1" value="3" />
23    <label for="button-3">作業中</label>
24    
25    <table>
26      <thead id>
27        <tr>
28          <th>ID</th>
29          <th>コメント</th>
30          <th>状態</th>
31        </tr>
32      </thead>
33      <tbody id="id_tbody">
34      </tbody>
35    </table>
36    
37    
38    <h2>新規タスクの増加</h2>
39    
40    <p id=id_p>
41      <input type="text" id="id_text" value="">
42      <button id="btn" type="btn" class="button" value=""> 追加</button>
43    </p>
44  </div>
45  
46  <script>
47    let id = 0;
48    //イベントリスナ―を登録
49    const btn = document.getElementById('btn');
50    btn.addEventListener('click', () => {
51      const idEl = document.createElement("td");
52      idEl.textContent = id;
53      const comment = document.getElementById("id_text").value;
54      const commentEl = document.createElement("td");
55      commentEl.textContent = (comment);
56      const btn1El = document.createElement("button");
57      btn1El.textContent = "作業中";
58      const btn2El = document.createElement("button");
59      btn2El.textContent = "削除";
60      const trEl = document.createElement("tr");
61      trEl.appendChild(idEl);
62      trEl.appendChild(commentEl);
63      trEl.appendChild(btn1El);
64      trEl.appendChild(btn2El);
65      const todoEl = document.getElementById("id_tbody");
66
67      todoEl.appendChild(trEl);
68      id++;
69
70      btn2El.addEventListener('click', () => {
71        console.log('リストを削除');
72        id_tbody.removeChild(trEl);
73      });
74      btn1El.addEventListener('click', () => {
75        console.log('表示を変更');
76        if (btn1El.textContent === "作業中") {
77          btn1El.textContent === "完了";
78        } else {
79          btn1El.textContent === "作業中";
80        }
81      });
82
83    }, false);
84
85
86
87
88  </script>
89</body>
90
91
92</html>

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

回答1件

ベストアンサー

js
1        if (btn1El.textContent === "作業中") {
2        //btn1El.textContent === "完了";
3          btn1El.textContent = "完了";
4        } else {
5        //btn1El.textContent === "作業中";
6          btn1El.textContent = "作業中";
7        }