FizzBuzzゲーム

概要

イベント発生時は計算ボタンをクリック。inputタグからユーザーが入力した値を受け取り、FizzuBuzzの結果を返すようプログラムしていきます。

HTML

index.html

 <input type="number" id="number">
 <button id="fire">計算</button>

JS処理①

index.js

　　function fizzBuzz(value) {
      if (value % 3 === 0 && value % 5 === 0) {
        return 'fizzBuzz';
      } else if (value % 3 === 0) {
        return 'fizz!';
      } else if (value % 5 === 0) {
        return 'Buzz!';
      } else {
        return value;
      }
    }

FizzBuzzの処理関数は上記になります。
仮引数をvalueとします。
①3の倍数かつ5の倍数の数字のときはfizzBuzz
②3の倍数のときには、fizz
③5の倍数のときには、Buzzを
④それ以外の数字のときには入力値を返します。

JS処理②

index.js

    document.getElementById('fire').onclick = () => {
      const num = document.getElementById('number');
      console.log(num.value);
      alert(num.value + 'は' + fizzBuzz(num.value));
    }

今回は、ユーザーがfire(計算)をクリックしたときにイベントが始まります。
idと紐付け、クリックイベント。
定数numにユーザーが入力した値を代入します。
結果をアラートで返します。num.valueで入力値を取得します。
関数名FizzBuzzを呼び出し引数としてユーザーからの入力値を引数として渡します。