JavaScriptでの要素の追加について

●やりたい事
<head>内に要素を追加し、追加した要素に文字を表示したい

(操作)
①make_div()関数にて
<head>内の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"要素が未定義であるため、エラーが発生しているのでしょうか？
その場合は、どこを修正すれば良いでしょうか？


<!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件

he[0] の id を持つ要素は作っていません。id[0] の間違いでは？

JavaScript
1  //const head = document.getElementById(he[n]);
2  const head = document.getElementById(id[n]);

投稿2019/10/28 03:22

x_x

総合スコア13749

ベストアンサー

まず勘違いがいくつかあるようです。

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

この時点でHTMLの文法違反です。
head要素内に入れられる要素は決まっています。
divは入れることができません。止めましょう。

そして、document.getElementByIdで取得できるのは、body内の要素のみです。
なので、body内で定義されて無い要素を拾えるわけないので、
生成したdiv_aaa〜div_dddは、どこにも挿入されていないわけです。
おそらく、DOMツリーが生成されないhead要素内の要素に、appendChildを実行しようとしたため、
上手く動作できず、
div#headに、入っているかもしれないが、
文法違反のため、ただしくレンダリングされずに、
（DOMツリーが生成されないため）
div#headの中身が取得できない状態になっているのかと思われます。
（つまりたとえ入ってたとしても、取得はできないということ）

●質問内容
上記③にてname_aaa()関数を実行すると
“Type Error:null is not an object”　となります。
入力ミスを見つける事が出来なかったのですが、name_aaa()関数実行時にdiv id="aaa"要素が未定義で> あるため、エラーが発生しているのでしょうか？

上記の理由から、おっしゃる通り、div id="aaa"は未定義扱いとなり、
後のメソッド（name_aaa）では要素が取得できていないため、
本質問でのエラーが起きるわけです。

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

<div id="head"></div>をbody内に入れてください。
どうしても、head要素内に情報を入れたいのであれば、
div以外の要素（metaとか）を使った上で、
取得の仕方を変えましょう。
JavaScriptでは、head要素ならびに、その中の要素ももちろん取得可能です。
その方法は、ご自身で探してください。

投稿2019/10/27 11:08

編集2019/10/28 02:14