FizzBuzzゲーム
4697 ワード
概要
イベント発生時は計算ボタンをクリック。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;
}
}
index.html
<input type="number" id="number">
<button id="fire">計算</button>
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));
}
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を呼び出し引数としてユーザーからの入力値を引数として渡します。
Author And Source
この問題について(FizzBuzzゲーム), 我々は、より多くの情報をここで見つけました https://qiita.com/akari_0618/items/5819911d6b93250b8670著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .