Q&A
順序も関係あるとは...今後は気をつけてコードを書いていこうと思います。また検証ツールも使用していこうと思います！ありがとうございました。
前提・実現したいこと
前回の質問同様todolistの簡単なアプリケーションを作成しています。
そして、tableを使用して表示させようとしているのですがうまくいきません。実現したいコードは以下の通りです。
<tr> <td>ID</td> <td>フォームで打ち込んだ内容</td> <td id="list_btn"><button>ボタン</button></td> </tr>
発生している問題・エラーメッセージ
現在はボタンが表示されない状態です。おそらくhtml内にlist_btnというidの要素が存在しないために表示されていないと思うのですが、jsファイルに
result += "<td>" + count + "</td>" + "<td>" + element +"</td>" + '<td id="list_btn">' + "</td>";
を記述しています。これではidつきのタグは作成できないのでしょうか？また、できない場合はどのように記述すればよいのかを教えていただきたいです。
該当のソースコード
html
1<body> 2 <h1>todo list</h1> 3 <div> 4 <input type="text" id="item"> 5 <button type="button" id='click-function'>Add</button> 6 </div> 7 8 <table> 9 <thead> 10 <tr> 11 <th>ID</th><th>コメント</th><th>状態</th><th></th> 12 </tr> 13 </thead> 14 <tbody id="list_item"> 15 16 </tbody> 17 </table> 18 <script src="index.js"></script> 19</body>
js
1const myfunc = document.getElementById('click-function'); 2let count = 0; 3result = ""; 4myfunc.addEventListener('click',function(){ 5 let todoItems = []; 6 let todoItem = document.getElementById('item').value; 7 todoItems.push(todoItem); 8 todoItems.forEach((element,index,array) => { 9 let btn_status = document.createElement('button'); 10 btn_status.textContent = "作業中"; 11 result += "<tr>"; 12 result += "<td>" + count + "</td>" + "<td>" + element +"</td>" + '<td id="list_btn">' + "</td>"; 13 result += "</tr>"; 14 document.getElementById('list_btn').appendChild(btn_status); 15 document.getElementById('list_item').innerHTML = result; 16 count++; 17 }) 18}) 19 20 21
回答2件
0
ベストアンサー
createElementを使用して問題を解決。もっといい方法がありそうだが、ひとまずこれでできた。
js
1const myfunc = document.getElementById('click-function'); 2let count = 0; 3result = ""; 4myfunc.addEventListener('click',function(){ 5 let todoItems = []; 6 let todoItem = document.getElementById('item').value; 7 todoItems.push(todoItem); 8 todoItems.forEach((element,index,array) => { 9 const btn_1 = document.createElement('button'); 10 const btn_2 = document.createElement('button'); 11 btn_1.textContent = "作業中"; 12 const td_1 = document.createElement('td'); 13 const td_2 = document.createElement('td'); 14 const td_3 = document.createElement('td'); 15 const tr = document.createElement('tr'); 16 td_1.appendChild(document.createTextNode(count)); 17 td_2.appendChild(document.createTextNode(todoItem)); 18 td_3.appendChild(btn_1) 19 tr.appendChild(td_1); 20 tr.appendChild(td_2); 21 tr.appendChild(td_3); 22 document.getElementById('list_item').appendChild(tr); 23 count++; 24 }) 25}) 26 27 28
投稿2020/04/19 01:57
編集2020/04/19 02:01退会済みユーザー
総合スコア0
0
ブラウザの検証ツールでどんなエラーが出ているか確認するようにするのがいいです。
今回の場合、addボタンを押した際に
「Uncaught TypeError: Cannot read property 'appendChild' of null」というエラーが発生します。
どうして、#list_btnの要素がnullなのかと考え、JavaScriptのコードをおうと、変数であるresultの中身に要素の内容を記述しているだけで、htmlに反映していないためだとわかります。
対応としては、
JavaScript
1document.getElementById('list_item').innerHTML = result; 2document.getElementById('list_btn').appendChild(btn_status);
先にhtmlに反映させてから、ボタンを追加するなどがあります。 (ただこの場合、2つ以上タスクを追加しようとすると、ボタンが追加できなくなります。なぜかは考えてみるのがいいと思います。)
投稿2020/04/18 11:40
総合スコア1135
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。