ラジオボタンを使ってcssのスタイルを表示・非表示をしたい
###質問の内容。
javaScriptでtodoListというものを作っています。
ラジオボタンには、すべて/作業中/完了の3つチェックボタンがあり、それぞれチェックするとそれに合った配列が表示される様な仕組みを作っています。チェックは1つしか選択できません。
発生している問題・エラーメッセージ
addEventListenerとif文で条件分岐しチェックされた項目がtrueの場合、チェックされてない配列をstyle.display="none"で非表示にし、falseの場合は同じ配列のstyle.display=""とし再表示されると思っていたのですが、一旦非表示になるとチェックを外しても非表示のまま戻らないです。
該当のソースコード
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <title>todoアプリ</title> 7 <link rel="stylesheet" href="css/styles.css"> 8</head> 9<body> 10 <h1>ToDoリスト</h1> 11 <form name="form1" id="checkedTask"> 12 <input type="radio" name="task" id="radio-all" checked>すべて</input> 13 <input type="radio" name="task" id="radio-work" >作業中</input> 14 <input type="radio" name="task" id="radio-done" >完了</input> 15 </form> 16 17 <div class="todolist"> 18 <p>ID コメント 状態</p> 19 <ol start="0" id="task-list"> 20 <!-- <li>タスク1 21 <button>作業中</button> 22 <button>削除</button> 23 </li> --> 24 25 </ol> 26 </div> 27 28 <div class="newtask"> 29 <h1>新規タスク追加</h1> 30 <form id="form"> 31 <input type="text" id="new-task" value=""> 32 <button class="btn" type="button" id="btn">追加</button> 33 <form> 34 </div> 35 36 37 38 <script src="js/main.js"></script> 39</body> 40 41</html>
javascript
1 2(function(){ 3 'use strict' 4 var btn = document.getElementById('btn'); 5 var taskList = document.getElementById('task-list'); /*olタグ*/ 6 var tasks = []; 7 var radioWork = document.getElementById('radio-work'); /*ラジオボタン作業中のid*/ 8 var radioDone = document.getElementById('radio-done'); /*ラジオボタン完了のid*/ 9 var radioAll = document.getElementById('radio-all'); 10 11 12 /*作業中ボタン作成処理*/ 13 var createWorkBtn = function(){ 14 var WorkBtn = document.createElement('button'); 15 var WorkText = document.createTextNode('作業中'); 16 WorkBtn.appendChild(WorkText); 17 // 作業ボタン押下処理 18 WorkBtn.addEventListener('click',function(){ 19 if(this.textContent == "作業中"){ 20 this.textContent = "完了"; 21 // 親要素へclassNameをつける処理 22 var doneParent = this.parentNode; 23 doneParent.className= 'workDone';/*完了class*/ 24 }else{ 25 this.textContent = "作業中"; 26 // ボタン押下で生成されたdomの中の親要素へclassNameをつける処理 27 var workParent = this.parentNode; 28 workParent.className = 'work';/*作業中class*/ 29 } 30 }) 31 return WorkBtn; 32 } 33 34 // 削除ボタン作成処理 35 var createDelBtn = function(){ 36 var delBtn = document.createElement('button'); 37 var delText = document.createTextNode('削除'); 38 delBtn.appendChild(delText); 39 delBtn.id = 'delId'; 40 41 // 削除ボタン押下処理 42 delBtn.addEventListener('click',function(){ 43 var li = this.parentNode; 44 var result = confirm('タスクを削除しますか?'); 45 if(result){ 46 li.remove(); 47 alert('削除しました。'); 48 return; 49 }else{ 50 return; 51 } 52 }) 53 return delBtn; 54 } 55 56 /*追加ボタン押下時処理 タスクを追加する*/ 57 btn.addEventListener('click',function(){ 58 var form = document.getElementById('form'); 59 var task = document.getElementById('new-task').value; 60 if(task==""){ 61 alert("タスクを入力して下さい"); 62 return; 63 } 64 tasks.push(task); /*new-taskの値を配列tasksへpush */ 65 66 //liタグ作成処理 67 var li = document.createElement('li'); 68 li.className = 'work'; 69 taskList.appendChild(li); /*taskList(olタグ)の子要素へ変数liを入れる*/ 70 71 for(var i = 0; i < tasks.length; i++ ){ /*i==配列のインデックス*/ 72 li.textContent = tasks[i] /*liタグの要素へ配列tasks[i]を代入*/ 73 } 74 li.appendChild(createWorkBtn()); /*returnで帰ってきたworkBtn*/ 75 li.appendChild(createDelBtn());/*returnで帰ってきたDelBtn*/ 76 }) 77 78 79 /*ラジオボタン完了を押下時の処理*/ 80 81 radioDone.addEventListener('click',function(){ 82 var workTsks = document.getElementsByClassName('work'); 83 workTsks = Array.from(workTsks); 84 85 if(radioDone.checked === true){ 86 workTsks.forEach(function(workTsks){ 87 workTsks.style.display = "none"; 88 }) 89 }else{ 90 workTsks.forEach(function(workTsks){ 91 workTsks.style.display = ""; 92 }) 93 } 94 }) 95 96 97 // ラジオボタン作業中押下時処理 98 99 radioWork.addEventListener('click',function(){ 100 var doneTsks = document.getElementsByClassName('workDone'); 101 doneTsks = Array.from(doneTsks); 102 103 if(radioWork.checked === true){ 104 doneTsks.forEach(function(doneTsks){ 105 doneTsks.style.display = "none"; 106 }) 107 }else{ 108 doneTsks.forEach(function(doneTsks){ 109 doneTsks.style.display = "none"; 110 }) 111 } 112 }) 113 114})();
試したこと
ググって2時間くらい調べましたが、上記のコードで表示/非表示を切り替わる内容の記事鹿見つけることが出来ませんでした。
補足情報(atom editor使用しています)
回答2件
あなたの回答
tips
プレビュー