配列を変数で生成したものをHTMLで表示したい。

配列を変数で生成したものをHTMLで表示したいです。

このままですと、エラーが出ます。
Uncaught TypeError: Cannot set property 'innerHTML' of null

コンソールのみだけでなく、
HTML内に'リンゴ', 'イチゴ', 'メロン', 'バナナ'を表示したいです。

それと、innerHTMLよりtextContentの方がいいのでしょうか。

<html>
  <body>
    <script type="text/javascript">
<!--
var rand = Math.floor(Math.random() * 2) + 1; //乱数を発生
document.write(rand);//値を表示

var items = ['リンゴ', 'イチゴ', 'メロン', 'バナナ'];
//最大値は配列の「要素数」にする
var random = Math.floor( Math.random() * items.length );

console.log( items[random] );
document.getElementById("kekka").innerHTML = items[random];
// -->
</script>
    <script type="text/javascript">
      function handan(rand){
        if(rand == 1){
           location.href='sample2.html';
        } else if(rand == 2) {
           document.getElementById("kekka").innerHTML = rand;
		} else if(rand == 3) {
           document.getElementById("kekka").innerHTML = "サンボマスター-可能性";
        } else if(rand == 4) {
           document.getElementById("kekka").innerHTML = "Mr.Children-シーソーゲーム ～勇敢な恋の歌～";
		} else if(rand == 5) {
           document.getElementById("kekka").innerHTML = "ポルノグラフィティ-THE DAY";
		}else {
           document.getElementById("kekka").innerHTML = "進む";
        }
      }
    </script>
    <input type="text" id="num">
    <input type="button" value="判断" onclick="handan(num.value)">
    <div id="kekka">君のことを知り太陽と北風カードゲーム</div>
  </body>
</html>

参考

JavaScript - JavascriptのinnerHTMLに関するエラーについて｜teratail

https://teratail.com/questions/146021

"誤：document.getElementById(msg);

正：document.getElementById('msg');

ついでに言っておくと、テキストノードを追加したいだけなら

innerHTMLよりtextContentの方が適切です。"

プログラミングのキホン、if文を使ってみよう！ (1/2)：初心者のためのJavaScript入門（4） - ＠IT

https://www.atmarkit.co.jp/ait/articles/1005/31/news109.html

"<html>

<body> <script type="text/javascript"> function handan(shadanki){ if(shadanki == 1){ document.getElementById("kekka").innerHTML = "止まる"; } else { document.getElementById("kekka").innerHTML = "進む"; } } </script> <input type="text" id="num"> <input type="button" value="判断" onclick="handan(num.value)"> <div id="kekka">ここに結果を表示します</div> </body> </html>"

JavaScriptで乱数を表示する方法 - HTML勉強メモ

https://htmlst.hatenablog.jp/entry/2016/12/25/080000

"<script type="text/javascript">

</script>"

【JavaScript入門】乱数の作り方(範囲指定/重複なし/ランダム文字列) | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

https://www.sejuku.net/blog/22432

"配列を乱数で指定しよう！

次に、乱数を使うケースが多い「配列」での扱い方について学習しましょう！

一般的には、配列の要素をランダムに取得できれば良いのですが、生成された乱数を配列のインデックス番号として扱えるようにするのがポイントでしょう。

次のサンプルで、具体的に見てみましょう！

1

2
3
4
5
6
var items = ['リンゴ', 'イチゴ', 'メロン', 'バナナ'];

//最大値は配列の「要素数」にする

var random = Math.floor( Math.random() * items.length );

console.log( items[random] );

出力結果は…

1

メロン"

kei344

2019/09/25 12:30

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

DrqYuto

2019/09/25 12:37

一応、一日待つことにしているのでお待ち下さい。

kei344

2019/09/25 12:40

「でできました。」とコメントされているので、問題自体解決できているのではないのでしょうか。

DrqYuto

2019/09/25 12:43

確かにそうですが、他の解決方法があればそれを知りたいです。

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

回答1件

ベストアンサー

記載する順番を入れ替えてみたら、コンソールのエラーは出なくなりました。
他にも直したいところはありますか？？

html
1<!DOCTYPE html>
2<html>
3  <body>
4    <input type="text" id="num">
5    <input type="button" value="判断" onclick="handan(num.value)">
6    <div id="kekka">君のことを知り太陽と北風カードゲーム</div>
7  </body>
8
9  <script type="text/javascript">
10    var rand = Math.floor(Math.random() * 2) + 1; //乱数を発生
11    document.write(rand);//値を表示
12
13    var items = ['リンゴ', 'イチゴ', 'メロン', 'バナナ'];
14    //最大値は配列の「要素数」にする
15    var random = Math.floor( Math.random() * items.length );
16
17    console.log( items[random] );
18    document.getElementById("kekka").innerHTML = items[random];
19  </script>
20
21  <script type="text/javascript">
22    function handan(rand){
23      if(rand == 1){
24        location.href='sample2.html';
25      } else if(rand == 2) {
26        document.getElementById("kekka").innerHTML = rand;
27      } else if(rand == 3) {
28        document.getElementById("kekka").innerHTML = "サンボマスター-可能性";
29      } else if(rand == 4) {
30        document.getElementById("kekka").innerHTML = "Mr.Children-シーソーゲーム ～勇敢な恋の歌～";
31      } else if(rand == 5) {
32        document.getElementById("kekka").innerHTML = "ポルノグラフィティ-THE DAY";
33      }else {
34        document.getElementById("kekka").innerHTML = "進む";
35      }
36    }
37  </script>
38</html>

原因についての予想ですが、htmlが描画される前にjavascriptが実行されてしまい、そのせいで document.getElementById("kekka") が null になってしまったのではないでしょうか？

投稿2019/09/25 12:07

siruku6

総合スコア1382

DrqYuto

2019/09/25 12:14

順番が大事だったんですね。ありがとうございます。

DrqYuto

2019/09/25 12:17

お陰様でできました。 ``` <!DOCTYPE html> <html> <body> <div id="kekka">君のことを知り太陽と北風カードゲーム</div> </body> <script type="text/javascript"> var rand = Math.floor(Math.random() * 2) + 1; //乱数を発生 document.write(rand);//値を表示 var items = ['リンゴ', 'イチゴ', 'メロン', 'バナナ']; //最大値は配列の「要素数」にする var random = Math.floor( Math.random() * items.length ); console.log( items[random] ); document.getElementById("kekka").innerHTML = items[random]; </script> </html> ```

siruku6

2019/09/25 12:32

私もそんなところに問題があるとは思いませんでした。以下のサイトに載っている、window.onload = function() {} を使えば、html読み込み後までjavascriptの実行を待ってくれそうな予感がします。 https://techacademy.jp/magazine/15558 参考まで

DrqYuto

2019/09/25 12:37

ありがとうございます。調べてみます。

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