前提・実現したいこと

全くの初学者です。
学習歴はjavascript、html5、css関連の入門書を5冊ほど
通読、載っているコードを全て写経した程度です。
現在ブラウザ上で動く、onclickで画像とテキストが切り変わっていく
プログラムを構成しようとしているのですが
innerhtmlテキストの切り替えが出来ず、頓挫しております。
お手数ですが、どなたかご教授願えませんでしょうか。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot set property 'onclick' of null
at scenario.js:10
Uncaught ReferenceError: txt is not defined
at onload (scenario.js:7)

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3<head>
4    <meta charset="utf-8">
5    <title>sample</title>
6    <link rel="stylesheet" href="canvas.css">
7    <script src="scenario.js" charset="UTF-8"></script>
8    <script src="clickpage.js" charset="UTF-8"></script>
9</head>
10<body>
11    <!--ビジュアル表示枠を配置します-->
12    <div id="imagebox"></div>
13    <!--メッセージ表示枠を配置します-->
14    <div id="messagebox"></div>
15    <!--最初に戻る用のボタンです-->
16    <button id="init">最初に戻る</button>
17</body>
18</html>

css
1#imagebox{
2    width:480px;
3    height:270px;
4    border-style:solid;
5    border-color:#696969;
6    border-width:2px;
7    background-color:#DCDCDC;
8  }
9  
10#messagebox{
11    /*文字間隔です*/
12    letter-spacing:1px;
13    /*行の高さです*/
14    line-height:27px;
15    width:480px;
16    height:135px;
17    border-style:solid;
18    border-color:#696969;
19    border-width:2px;
20    /*フォントの太さです*/
21    font-weight:bold;
22    font-size:26px;
23    color:#ffffff;
24    background-color:#DCDCDC;
25  }

js
1var txt0="最初に表示するテキスト";
2var txt1="2番目に表示するテキスト"
3var txt2="―了―"
4
5window.onload = function onload(){
6    target = document.getElementById("messagebox");
7    target.innerHTML = txt++;
8    }
9
10document.getElementById("messagebox").onclick = function(){
11    document.getElementById("messagebox").innerHTML = txt++;
12}

試したこと

target.innerHTML = テスト1;　のように
1行だけの表示であれば問題無くmessagebox内に表示されます。

補足情報（FW/ツールのバージョンなど）

環境はvidual Studio Code でコードを記載後、Chrome上で確認を行っています。
上記コードはvidual Studio Code　上では警告は出ていません。

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

回答2件

Uncaught TypeError: Cannot set property 'onclick' of nullのほうは、onloadの外側でイベント定義をやろうとした結果、まだエレメントが存在しない状態で実行されてしまった結果です。

Uncaught ReferenceError: txt is not definedはメッセージのとおりで、txtという変数が存在しません。

投稿2019/12/07 07:18

maisumakun

総合スコア146849

ktanaka11

2019/12/09 06:07

エラー内容に関するご回答を頂き、誠にありがとうございます！

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

ベストアンサー

Sample

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3<head>
4    <meta charset="utf-8">
5    <title>sample</title>
6    <style>
7        #messagebox {
8            /*文字間隔です*/
9            letter-spacing: 1px;
10            /*行の高さです*/
11            line-height: 27px;
12            width: 480px;
13            height: 135px;
14            border-style: solid;
15            border-color: #696969;
16            border-width: 2px;
17            /*フォントの太さです*/
18            font-weight: bold;
19            font-size: 26px;
20            color: #ffffff;
21            background-color: #DCDCDC;
22        }
23
24    </style>
25</head>
26<body>
27<!--メッセージ表示枠を配置します-->
28<div id="messagebox"></div>
29<!--最初に戻る用のボタンです-->
30<button id="init">最初に戻る</button>
31<script>
32
33    let num = -1;
34    let messages = [
35        "最初に表示するテキスト",
36        "2番目に表示するテキスト",
37        "―了―"
38    ];
39
40    window.onload = function onload() {
41        let target = document.getElementById("messagebox")
42        target.addEventListener('click', function () {
43            num = (num + 1) % messages.length;
44            this.innerText = messages[num];
45        });
46        target.click();
47
48        let init = document.getElementById('init');
49        init.addEventListener('click', function () {
50            target.innerText = messages[0];
51        })
52    };
53</script>
54</body>
55</html>

投稿2019/12/07 07:27

退会済みユーザー

総合スコア0

ktanaka11

2019/12/09 06:12

ご回答頂き、誠にありがとうございます！いただきましたHTMLをコピーさせていただいたところ希望通りの動作が実現できました。これから頂きましたコードを1行ずつ紐解き自分の知識と出来るよう、勉強させていただきます。このたびは誠にありがとうございました。

ktanaka11

2019/12/09 09:11

Kosuke_Shibuya様大変申し訳ございません。いただきましたサンプルコードの内 num = (num + 1) % messages.length; こちらの行が全体の中でどのように作用しているのか理解できませんでした。 %　は剰余演算子で messages.length は messages の文字数でしょうか。重ね重ね申し訳ございませんがご教授いただけましたら非常に助かります。よろしくお願いいたします。

退会済みユーザー

2019/12/09 09:15 編集

messagesは配列です。 messages.lengthは配列のアイテム数 num = (num + 1) % messages.length; アイテム数が3個なので、4回目にボタンを押した時に、値を0に戻す処理。

ktanaka11

2019/12/09 09:27

messagesは配列でしたか･･････お恥ずかしい限りです。ご説明頂きまして、ありがとうございます。連続してクリックしたときに最初へ戻る処理と最初へ戻るボタンを押してのinitで最初へ戻る処理の2つが実装されているのですね。理解できました。手元の書籍でもう一度配列の箇所を読み込もうと思います。何度もご返答いただきまして、感謝いたします！

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

あなたの回答