ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

● STEP 10-2

各画面を作成しよう

　アプリケーションの初期化の要であった通信データの取得やその表示に成功したので、全体的な動きを見ていきましょう。必要な3つの画面を作って画面遷移を実現します。画面を行き来できるようにしてから、細かいロジックを考えていきます。DOM操作とイベントハンドラの基礎が理解できていれば混乱せずに進められるでしょう。

開始画面

　開始画面にはセレクトボックスの他にゲームを開始するためのボタンが必要なので、追加しておきましょう。displayStartViewをリスト10-2-01のように変更してください。

DEMO https://books.circlearound.co.jp/step-up-javascript/demos/step10/5

10-2-01　main.js

　html変数の値（開始画面となるHTML）にボタン要素を追加しました（❶）。

　そして❶で追加したボタンがクリックされた時に実行するリスナを ...