次は JavaScript を記述していきます。
JavaScript を記述する時は script タグを使用し、記述方法は 2 種類あります。
- script タグで囲む
<script> // ここにコードを書く </script> - script タグの src 属性で外部の JavaScript ファイルを読み込む
<script src="script.js"></script>
今回は練習のため script タグで囲む方法で進めていきます。
また、詳しいコードの説明は最後にしますので、最初は JavaScript のイメージを掴んでもらえたらと思います。
正解の数字を設定する
まずは画面を表示した時に正解の数字をランダムに設定します。
<script>
const answerNumber = Math.floor(Math.random() * 10) + 1;
</script>
inputタグとbuttonタグをDOM操作できる様にする
次は、入力した数字を取得するためのコードと、ボタンをクリックした時に処理を追加するためのコードを書いていきます。
※以降は script タグの中だけを記載します。
const inputNumber = document.querySelector("#inputNumber");
const btn = document.querySelector("#btn");
これで、inputとbuttonタグをJavaScriptで操作する事ができる様になりました。
ボタンにクリック処理を追加する
次は、ボタンをクリックした時に入力された数字が正解かどうかを判断するコードを書いていきます。
btn.addEventListener("click", function () {
if (inputNumber.value == answerNumber) {
alert("正解");
}else {
alert("はずれ");
}
});
これで「数当てゲーム」の完成です！
コードの確認
最終的に次の様なコードになっていれば問題ありません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<input type="text" id="inputNumber" />
<button id="btn">確認</button>
<script>
const answerNumber = Math.floor(Math.random() * 10) + 1;
const inputNumber = document.querySelector("#inputNumber");
const btn = document.querySelector("#btn");
btn.addEventListener("click", function () {
if (inputNumber.value == answerNumber) {
alert("正解");
} else {
alert("はずれ");
}
});
</script>
</body>
</html>
実際に遊んでみる
実際にブラウザで動かして確認してみましょう。
1~10 の入力した数字によって「正解」か「はずれ」がアラートで表示されると思います。
