九九のアプリを作る

超シンプルな九九アプリを作ってみる。

• 画面に 7 x 9 = みたいな、一桁の掛け算の式が表示されている。
• 答えを見る というボタンがある。押すと、答えが表示される 7 x 9 = 63
• ボタンのラベルが 次の問題 に変わる。押すと新たな式が出る 3 x 4 =

JavaScriptでランダムの数(乱数)を作る方法

これに従うと、2-9の範囲の整数をランダムに生成するには

Math.floor(Math.random() * 8) + 2

とすれば良さそう。

let x = Math.floor(Math.random() * 8) + 2 ;
let y = Math.floor(Math.random() * 8) + 2 ;
let z = x * y;
console.log(`${x} x ${y} = ${z}`);

で、リロードするたびにランダムに2つの1桁の整数（1は除く）の掛け算の式と答えを作れた。計算式の部分はこれがベースでいけそう。

なんで

let x = Math.floor(Math.random() * 8) + 2

で

2 <= x <= 9 の整数が得られるのかをちゃんと理解したい。

指定範囲の整数からランダムに1つを選ぶ方法 - JavaScript TIPSふぁくとりー

ここが参考になりそう。

順を追っていくと

• Math.random() で0～1未満の乱数を得る
  • つまり 0 <== Math.random() < 1 ということ
  • 具体的には 0.8006949746745426 みたいな小数
• これを *8 すると 0 <== Math.random()*8 < 8
• このとき、まだ小数点以下が含まれる
• Math.floor() で小数点以下を切り捨てる
  • 0 <== Math.floor(Math.random()*8) <= 7
  • これで 0から7までの整数 が得られる
• ここに +2 すれば、 2から9までの整数 になる

ということか。なるほど。

答えを見るボタン と 次の問題へ ボタンの切り替え

.hidden {
    display: none;
}

    <button id="buttonNewQuestion" class="" onclick="newQuestion();">つぎへ</button>
    <button id="buttonShowAnswer" class="hidden" onclick="showAnswer();">こたえ</button>

として、この hidden クラスをtoggleする関数を作る。

const toggleButtons = () => {
    buttonNewQuestion.classList.toggle('hidden');
    buttonShowAnswer.classList.toggle('hidden');
}

あとは、それぞれのボタンを叩いたときに呼び出される newQuestion() showAnswer() それぞれの中で、この toggleButtons() を呼び出すようにすれば、ボタンを切り替えられる。

一応できた。

むげん九九