●やりたい事
<head>内に要素を追加し、追加した要素に文字を表示したい
(操作)
①make_div()関数にて
<head>内のdiv id="head"の子要素としてdiv id="aaa"及"bbb"を追加
②name_ccc()関数にて
div id="ccc"にname_aaa()関数を実行する為のonclickボタン(次へ)を追加
③onclickボタン(次へ)を投下しname_aaa()関数を実行
div id="aaa"にinnerHTML にて"aaa" と表示
●質問内容
上記③にてname_aaa()関数を実行すると
“Type Error:null is not an object” となります。
入力ミスを見つける事が出来なかったのですが、name_aaa()関数実行時にdiv id="aaa"要素が未定義であるため、エラーが発生しているのでしょうか?
その場合は、どこを修正すれば良いでしょうか?
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <div id="head"></div> </head> <body> <div id="result"></div> <script> //(操作)① const he = ["aaa","bbb"]; const id = ["ccc","ddd"]; window.addEventListener('DOMContentLoaded', function make_div(){ const result_head = document.getElementById("head"); const div_aaa = document.createElement('div'); div_aaa.he = he[0]; result_head.appendChild(div_aaa); const div_bbb = document.createElement('div'); div_bbb.he = he[1]; result_head.appendChild(div_bbb); const result = document.getElementById("result"); const div_ccc = document.createElement('div'); div_ccc.id = id[0]; result.appendChild(div_ccc); const div_ddd = document.createElement('div'); div_ddd.id = id[1]; result.appendChild(div_ddd); name_ccc(); }); //(操作)② function name_ccc(){ const n =0; const result = document.getElementById(id[n]); if (!result.hasChildNodes()){ result.innerHTML += "ccc"; const input = document.createElement("input"); input.setAttribute("type","button"); input.setAttribute('onclick','name_aaa()'); input.setAttribute("value","次へ"); result.appendChild(input); } } //(操作)③ function name_aaa(){ const n =0; const head = document.getElementById(he[n]); head.innerHTML += "aaa"; } </script> </body> </html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。