ミッション：1〜10の中に隠れた正解の数字を当てよう！大きい・小さいのヒントをたよりに探せ！
HTMLタブに下のコードを貼り付けてください。
<p>1〜10の数字を当てよう！</p>
<input id="input" type="number" min="1" max="10">
<button id="btn">答える</button>
<p id="result"></p>
JSタブに下のコードを貼り付けてください。
const answer = 7;
const btn = document.querySelector('#btn');
const input = document.querySelector('#input');
const result = document.querySelector('#result');
btn.addEventListener('click', function() {
const guess = Number(input.value);
if (guess === answer) {
result.textContent = '正解！🎉';
} else if (guess < answer) {
result.textContent = 'もっと大きい！';
} else {
result.textContent = 'もっと小さい！';
}
});
数字を入力して「答える」ボタンを押し、ヒントが表示されることを確認してください。7 を入力すると正解になります。
input 要素と input.value<input id="input" type="number" min="1" max="10">
input タグは文字や数字を入力できる欄を作ります。type="number" を指定すると数字専用になります。
const guess = Number(input.value);
input.value で入力欄の内容を取得できます。ただし取得した値は文字列（テキスト）として扱われるため、Number() で数値に変換してから使います。
if / else if / else の3分岐if (guess === answer) {
// 正解のとき
} else if (guess < answer) {
// 正解より小さいとき
} else {
// それ以外（正解より大きいとき）
}
if / else の2分岐に加え、else if を挟むと3つ以上の分岐を作れます。上から順に条件を確認して、最初に当てはまった場所だけが実行されます。
const answer = 7; ← ここを変える
友達に問題を出すときはここを変えましょう。
毎回違う数字を正解にしたいときは、Math.floor(Math.random() * 10) + 1 を使います。
const answer = Math.floor(Math.random() * 10) + 1;
Math.random() は「ランダム魔法陣」で学んだランダムな小数を生成する命令です。* 10 で0〜9.99...になり、Math.floor() で小数点以下を切り捨て、+ 1 で1〜10の整数になります。
if / else if / else を使っている