質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

3233閲覧

JavascriptのinnerHTMLに関するエラーについて

witchy

総合スコア74

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

1クリップ

投稿2018/09/11 08:31

編集2018/09/11 09:11
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JStest4</title> </head> <body> <h1>Confirmと繰り返し処理</h1> <button onClick = "buttonclick();">実行</button> <div id="msg"></div> <script> function buttonclick(){ var i = 0; str = document.getElementById(msg); while(confirm("続けますか?")){ i++; str.innerHTML = i+"回\"OK\"をクリックしました。"; } } </script> </body> </html>

confirmを使って繰り返し処理をしたいのですが、str.innerHTMLに文字列を代入する部分で下記エラーが出てしまいます。これを回避する方法はありますでしょうか?

<試したこと>
・str.innerHTMLの行をコメント処理するとループは回りました。
・head部分に記述していたscript要素をbody終了タグの手前に持ってきたが、エラーは変わらず出ました。
・button要素とdiv要素の行を入れ替えたが、エラーは変わらず出ました。

<以下エラーの内容です。>

Uncaught TypeError: Cannot set property 'innerHTML' of null

at buttonclick (js-4.html:19) at HTMLButtonElement.onclick (js-4.html:10)
DrqYuto👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

誤:document.getElementById(msg);

正:document.getElementById('msg');

ついでに言っておくと、テキストノードを追加したいだけなら
innerHTMLよりtextContentの方が適切です。

投稿2018/09/11 08:35

編集2018/09/11 08:37
spookybird

総合スコア1803

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

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

witchy

2018/09/11 08:56

変更したら上手くいきました! プラスアルファの改善案もいただけて、大変嬉しいです! 本当にありがとうございます!
guest

0

実装して確認してないですけど、引数が変数になっています。文字列にすれば多分取得できますよ。

str = document.getElementById('msg');

投稿2018/09/11 08:35

kszk311

総合スコア3404

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

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

witchy

2018/09/11 08:57 編集

本当ですね! ご解答いただきありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問