Q&A
「Java」タグが無関係なんで外しましょう。
「Java」と「JavaScript」を混同するのは自分が無知だと宣伝してるようなもんです。
前提・実現したいこと
ラジオボタンでのtodoリストの表示・非表示を切り替えたい
発生している問題・エラーメッセージ
実装したい機能：todoリストのタスクをラジオボタンの全て、作業中、完了で表示・非表示を分けたい
該当のソースコード
###HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ToDoリストsss</title> </head> <body> <h1>ToDoリスト</h1> <p> <div class="radio_button"> <label><input type="radio" name="radio1" value="1" id="radioall" checked="checked" onchange="radioChange()">すべて</label> <label><input type="radio" name="radio1" value="2" id="radiowork" onchange="radioChange()">作業中</label> <label><input type="radio" name="radio1" value="3" id="radiodone" onchange="radioChange()">完了</label> </div> <div class="task"> <table> <thead> <th>ID</th> <th>コメント</th> <th>状態</th> </thead> <tbody id="todo-body"></tbody> </table> </div> </p> <header class="header"> <h2>新規タスクの追加</h2> </header> <label for="input-todo-box">ToDoリスト</label> <input id="input-todo-box" type="text" value=""> <button id="add-button">追加</button> <script src='git.js'></script> </body> </html>
###JavaScript
`use strict` const todos = []; const inputBox = document.getElementById('input-todo-box'); const addButton = document.getElementById('add-button'); const tableBody = document.getElementById('todo-body'); addButton.addEventListener('click', (event) => { const todo = { comment: inputBox.value, status: '作業中' } inputBox.focus(); if (inputBox.value === '') { alert('タスクを入力してください！'); return; } if (todo) { todos.push(todo); inputBox.value = ''; showTodos(); } }); const showTodos = () => { tableBody.textContent = ''; todos.forEach((todo, number) => { const tableRecord = document.createElement('tr'); tableBody.appendChild(tableRecord); const tableId = document.createElement('td'); const tableComment = document.createElement('td'); const tableStatus = document.createElement('td'); const tableAction = document.createElement('td'); tableId.textContent = number; tableComment.textContent = todo.comment; tableRecord.appendChild(tableId); tableRecord.appendChild(tableComment); tableRecord.appendChild(tableStatus); tableRecord.appendChild(tableAction); tableStatus.appendChild(createStatusButton()); tableAction.appendChild(createDeleteButton()); }); }; const createStatusButton = () => { const statusButton = document.createElement('button'); statusButton.classList.add("doing"); statusButton.textContent = '作業中'; statusButton.addEventListener('click', () => { if (statusButton.textContent === '作業中') { statusButton.classList.add("doing"); statusButton.textContent = '完了'; } else { statusButton.classList.add("done"); statusButton.textContent = '作業中'; } }); return statusButton; }; const createDeleteButton = () => { const deleteButton = document.createElement('button'); deleteButton.textContent = '削除'; deleteButton.addEventListener('click', (e) => { let t=e.target.closest('tr'); let idx=[...tableBody.querySelectorAll('tr')].indexOf(t); t.parentNode.removeChild(t); todos.splice(idx,1); showTodos(); }); return deleteButton; };
試したこと
const showTodos = () => {}
ここの中に引数を引き渡す処理を書くのかと思い
コードを書いてみましたが、なかなかうまくいきませんでした、助けてください
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
ついでに
> ここの中に引数を引き渡す処理を書くのかと思い
課題の丸投げなら非推奨事項なので低評価しておきます。（自分で考えたコードならわかるはず）
可能性がゼロではないので確認。
Javaは本件とはどう関係するのでしょう。
記載内容からJavaの雰囲気は全くないように見受けられます。
回答1件
0
ベストアンサー
HTML
1index.html:14 Uncaught ReferenceError: radioChange is not defined 2 at HTMLInputElement.onchange (index.html:14)
radioChangeなんて知らんぞ！って怒られてます。
radioBoxのonchangeをshowTodosに変更して、引数を渡して関数を実行すればよいかと。
分からない点は具体的にお願いします。
投稿2021/07/31 04:10
編集2021/07/31 04:14
総合スコア70
あなたの回答
tips
プレビュー
