前提・実現したいこと
全くの初学者です。
学習歴は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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/09 06:07