前回質問後にご指定頂いた点変更しましたが、同エラーが出ましたので改めて質問します。
●やりたい事
<body>内に要素を追加し、追加した要素に文字を表示したい
(※当初は<head>内に要素を追加したかったのですが、div要素は追加出来ないとのご指摘ありましたので、<body>内に追加したいと思います。)

(操作)
①make_div()関数にて
<body>内のdiv id="head"の子要素としてdiv id="aaa"及"bbb"を追加

<body>内のdiv id="body"の子要素としてdiv id="ccc"及"ddd"を追加 name_ccc()関数を実行

②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"要素が未定義であるため、エラーが発生しているのでしょうか？
ただ、make_div()関数内にresult_head.innerHTML += "テスト";と入力すると表示されました。ということはdiv id="aaa"要素が定義されているのでしょうか？

その場合は、どこを修正すれば良いでしょうか？


<!DOCTYPE html><html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />

</head>
<body>

<div id="head"></div>

 <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);
//result_head.innerHTML += "テスト";

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>

行動規範の内容に同意します

回答1件

ベストアンサー

div_aaa.he = he[0];
div_bbb.he = he[1];

の各行が

javascript
1div_aaa.id = he[0]; 
2div_bbb.id = he[1];

なのでは？

sample

javascript
1<script>
2const he = ["aaa","bbb"];
3const id = ["ccc","ddd"];
4const name_ccc=()=>{
5  const n =0;
6  const result = document.querySelector('#'+id[n]);
7  result.textContent += "ccc";
8  const input = Object.assign(document.createElement("input"),{
9  type:"button",
10  value:"次へ",
11  });
12  input.addEventListener('click',name_aaa);
13  result.appendChild(input);
14}
15const name_aaa=()=>{
16  const n =0;
17  document.querySelector('#'+he[n]).textContent += "aaa";
18}
19window.addEventListener('DOMContentLoaded', ()=>{
20  he.map(x=>Object.assign(document.createElement('div'),{id:x})).reduce((x,y)=>(x.appendChild(y),x),document.querySelector("#head"));
21  id.map(x=>Object.assign(document.createElement('div'),{id:x})).reduce((x,y)=>(x.appendChild(y),x),document.querySelector("#result"));
22  name_ccc();
23});
24</script>
25<div id="head"></div>
26<div id="result"></div>