質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

ラジオボタンの切り替えによる表示非表示

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 678

score 50

課題内容

上記課題内容のjavaScriptでtodoListを作っています。
 
ラジオボタンには、すべて/作業中/完了の3つチェックボタンがあり、それぞれチェックするとそれに合った配列が表示される様な仕組みを作っています。
チェックは1つしか選択できません。

現在、以下のコードでは「ラジオボタンの作業中を押したときにtr要素の完了が消え、ラジオボタンの完了を押したときにtr要素の作業中が消えるという仕組み」を作ろうとしています。 

質問の内容

現在、ラジオボタンの切り替えでtr要素の作業中または完了を非表示にする仕組みを作ろうとしています。

getElementByClassNameで作業中と完了の表示されているボタンの配列を取得し、parentNodeでtr要素まで遡ってstyle.displayを使って上記の仕組みを作ろうとしています。

しかし、現在ラジオボタンを押しても作業中も完了も非表示になりません。
その上、エラー(以下添付写真)が出ているのですが、調べてもどういうエラ―なのかが分かりません。
![添付写真](67ecdbfbb5df754ffa1ec4460a7ea5ce.png)
イメージ説明

3時間以上、関連書籍やググったりしているのですが、解決できないでいます。

使用エディタはVSCodeです。

<!DOCTYPE html>
<html lang="ja"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>ToDoリスト</title>
  <link rel="stylesheet" href="css/style.css"></head><body>
  <h1>ToDoリスト</h1><div class="radiobutton">
    <input type="radio" id="button-1" name="radio1" value="1" checked="checked" />
    <label for="button-1">すべて</label>
    <input type="radio" id="button-2" name="radio1" value="2" />
    <label for="button-2">完了中</label>
    <input type="radio" id="button-3" name="radio1" value="3" />
    <label for="button-3">作業中</label><table>
      <thead id>
        <tr>
          <th>ID</th>
          <th>コメント</th>
          <th>状態</th>
        </tr>
      </thead>
      <tbody id="idTbody">
      </tbody>
    </table><h2>新規タスクの増加</h2><p id=id_p>
      <input type="text" id="id_text" value="">
      <button id="btn" type="btn" class="button" value=""> 追加</button>
    </p>
  </div><script src="js/main.js"></script>
</body>

</html>
'use strict'
let taskid = 0;
function entryChange() {
  radio = document.getElementsByClassName('radio1')
  //ラジオボタンの0(すべて)がチェックされたとき
  if (radio[0].checked) {
    document.getElementsByClassName('done').style.display = "";
    document.getElementsByClassName('doing').style.display = "";
    //ラジオボタンの1(完了)がチェックされたとき
  } else if (radio[1].checked) {
    //フォーム
    doing.forEach(done => {
      console.log(done);
      document.getElementsByClassName('done').style.display = "";
      document.getElementsByClassName('doing').style.display = "none";
    })
    //ラジオボタンの2(作業中)がチェックされたとき
  } else if (radio[2].checked) {
    //フォーム
    doing.forEach(work => {
      console.log(work);
      document.getElementsByClassName('done').style.display = "none";
      document.getElementsByClassName('doing').style.display = "";
    })
  }
}
//オンロードさせ、リロード時に選択を保持
window.onload = entryChange;

//イベントリスナ―を登録
const add_btn = document.getElementById('btn');
add_btn.addEventListener('click', () => {
  const id_td = document.createElement("td");
  id_td.textContent = taskid;
  const comment = document.getElementById("id_text").value;
  const commentEl = document.createElement("td");
  commentEl.textContent = (comment);

  const createWorkingBtn = function () {
    //作業中ボタンを生成する処理
    const workingBtn = document.createElement("button");
    workingBtn.classList.add("doing");
    workingBtn.textContent = "作業中";
    workingBtn.addEventListener('click', () => {
      console.log('表示を変更');
      if (workingBtn.textContent === "作業中") {
        workingBtn.classList.add("doing");
        workingBtn.textContent = "完了";
        // ボタン押下で生成されたdomの中の親要素へclassNameをつける処理
        const doneParent = workingBtn.parentNode;
        doneParent.className = 'workDone';
      } else {
        workingBtn.classList.add("done");
        workingBtn.textContent = "作業中";
        // ボタン押下で生成されたdomの中の親要素へclassNameをつける処理
        const workParent = this.parentNode;
        workParent.className = 'work';
      }
    })
    //生成した作業中ボタンを返す処理
    return workingBtn;
  }
  const workingBtn = createWorkingBtn();


  const createDelBtn = function () {
    //削除ボタンを生成する処理
    const delBtn = document.createElement("button");
    delBtn.textContent = "削除";
    delBtn.addEventListener('click', () => {
      idTbody.removeChild(trEl);
    })
    //生成した削除ボタンを返す処理
    return delBtn;
  }
  const delBtn = createDelBtn()

  const trEl = document.createElement("tr");
  trEl.appendChild(id_td);
  trEl.appendChild(commentEl);
  trEl.appendChild(workingBtn);
  trEl.appendChild(delBtn);
  const todoEl = document.getElementById("idTbody");

  todoEl.appendChild(trEl);
  taskid++;

}, false); 
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2019/12/18 18:02

    エラーは jQuery のようですが、jQuery を使っているのでしょうか?

    キャンセル

回答 1

checkベストアンサー

+3

気づいたこと

完全な回答ではありませんが、気づいたことがありますので、お伝えします。
ボタンの要素を取得しているところです。

 radio = document.getElementsByClassName('radio1')

radio1はname属性なので、getElementsByName()を使えべきかと思います。
もしくは、ラジオボタンの方にradio1クラスをつけるか。

以上

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/17 17:01

    同感です。https://teratail.com/questions/229560#reply-335279 で回答した qa() qsa() を参考にしてほしいとも感じました。
    コメント欄で失礼しました。

    キャンセル

  • 2019/12/17 20:08

    >>KazuSakaさん
    修正します。
    ご指摘ありがとうございます。

    キャンセル

  • 2019/12/17 20:10 編集

    >>AkitoshiManabeさん
    前回ご指摘いただいた件について修正した後、コードミスがきっかけで過去のデータで上書きしたためリセットされたままにしていました。
    再度修正します。
    コメントありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る