実現したいこと
３つの色選択のボタンから任意のボタンを押したのち、「書く」ボタンを押すと、
その下の行に鉛筆の色、長さが表示されるようにしたい。
前提
『ゲームで学ぶJavaScript入門』に出てくる、コンストラクタによるオブジェクト作成の練習問題です。
スクリプトの冒頭にてコンストラクタを設定しています。
発生している問題・エラーメッセージ
３つの色選択のボタンから任意のボタンを押したのち、「書く」ボタンを押すと、
画面が真っ白（htmlのbody要素に何も書いていない状態）になってしまいます。
MicrosoftEdgeのデバッガでは、エラーメッセージは表示されませんでした。
該当のソースコード
JavaScript
1<!DOCTYPE html>2<html>3 <head>4 <meta charset="UTF-8">5 </head>6 <body>7 <button onclick="R()">赤を選ぶ</button>8 <button onclick="G()">緑を選ぶ</button>9 <button onclick="B()">青を選ぶ</button>10 <button onclick="write()">書く</button>11 <p>12 鉛筆の色は<span id="color"></span>、長さは<span id="length"></span>cm 13 </p>14 </body>15 <script>16 function Pen(color, length) {17 this.color = color;18 this.length = length;19 this.draw = function () {20 this.length -= 0.01;21 }; 22 }23 let penR = new Pen("red", 20);24 let penG = new Pen("green", 15);25 let penB = new Pen("blue", 10);26 27 let pen = penR;28 29 function write() {30 pen.draw();31 document.getElementById("color").textContent = pen.color;32 document.getElementById("length").textContent = pen.length;33 }34 35 function R() {36 pen = penR;37 }38 39 function G() {40 pen = penG;41 }42 43 function B() {44 pen = penB;45 }46 </script>47</html>
試したこと
MicrosoftEdgeでデバッグしてみましたが、エラー表示がありませんでした。
また全角文字がないか確認しましたが、ありませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント