🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1899閲覧

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

tetsu777

総合スコア39

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/10/27 09:43

編集2019/10/27 09:45

●やりたい事
<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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

①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
miyabi_takatsuk

総合スコア9555

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tetsu777

2019/10/28 03:32

早速のご回答ありがとうございます。 そもそも<head>にはdivは入れること出来ないのですね。 勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問