【要件】
-
入力された整数値でFizzBuzz問題を実行できる
- fizzNumに入力された値の倍数とbuzzNumに入力された値の倍数を小さい順に表示する
- 各々倍数と一緒にfizz、buzzと表示させる
- 両方の倍数である時にはfizzBuzzと表示させる
- 表示させるのは二桁の値まで
-
整数値が入力されずに実行ボタン押下された際にはエラーを表示させる
- 文字列が入力された時
- 少数が入力された時
- 空欄だった時
【作成にあたり学習した事】
- if文
- ループ処理
- DOM
- getElementById()
- appendChild()
- createElement()
【DOM】 getElementById()とは
『getElementById』とは、指定したid値を持つ要素をElementオブジェクトとして返すメソッド。
HTMLタグの中から指定したidを取得して何らかの処理をしたい場合などに使用される。
getElementByIdで要素を取得するには以下のように記述。
idにはHTMLに記述した取得したいid要素を記述し、
同一idはHTML内において複数使用することは出来ないので、一意なid値である必要がある。
document.getElementById(id)
###【DOM】 appendChild()とは
JavaScriptでプログラミングを行う際、動的にWebサイトに要素を追加したい場合に、便利なのが『appendChild メソッド』。
※要素の集合体をノードという。
『appendChildメソッド』を使うと、特定の親ノードの子ノードの最後にノードを追加することができる。
なお、追加しようとしたノードが既に存在していたら、既存のノードが新しいノードで置き換わる。
appendChild メソッドの書き方は以下のように記述。
var child = element.appendChild(child);
【DOM】createElement()とは
JavaScript で HTML 要素を動的に生成するには『createElement() メソッド』を使用する。
createElement() メソッドの書き方は以下のように記述し、タグ名には div や a などの HTML 要素名を指定する。
const element = document.createElement(タグ名)
crreateElement() メソッドで生成した要素を、実際の HTML 要素に追加することで HTML を動的に生成することができ、
HTML 要素への追加には appendChild() メソッドなどを使用する。
HTML要素.appendChild(生成した要素)
【FizzBuzz問題】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript課題②</title>
</head>
<body>
<body>
<h1>FizzBuzz問題</h1>
<p>FizzNum : <input type="text" name="fizzes" id="fizz" placeholder="Enter an integer value"></p>
<p>BuzzNum : <input type="text" name="buzzes" id="buzz" placeholder="Enter an integer value"></p>
<button value="実行" id="btn">実行</button>
<div id="output">
<p>【出力】</p>
</div>
<script src="main.js"></script>
</body>
</body>
</html>
`use strict`
//HTMLの中からIdがbtnの要素を取得
const btn = document.getElementById('btn');
//ボタン要素のクリックイベントをトリガーにコールバック処理を作成
btn.addEventListener('click', () => {
//入力値の取得//
//HTMLの中からIdがfizzの要素を取得
const elemFizzNumber = document.getElementById('fizz');
//fizzNumのinputに入力された数字から値を取得
const fizzNumber = elemFizzNumber.value;
//HTMLの中からIdがbuzzの要素を取得
const elemBuzzNumber = document.getElementById('buzz');
//BuzzNunのinputに入力された数字から値を取得
const buzzNumber = elemBuzzNumber.value;
//結果情報のベース作成//
//HTMLの中からIdがoutputの要素を取得
const outputArea = document.getElementById('output');
//結果要素の子要素を取得
outputArea.innerHTML = '';
//pタグの要素を作成
const ptag = document.createElement('p');
//pタグの要素に結果情報ヘッダーの固定値をセット
ptag.textContent = '【出力】';
//結果要素の子要素としてpタグの要素を追加
outputArea.appendChild(ptag);
//結果情報の中身を作成//
//fizzbuzz問題のループ文
// 変数iを定義し、iが100より小さい場合、iに1ずつ足していく処理を実行
for (let i = 1; i < 100; i++) {
//バリューを取得するための変数を定義
let value = '';
//iがfizzes、buzzesの両方の数値の倍数である場合の処理
if (i % fizzNumber === 0 && i % buzzNumber === 0) {
//ブラウザに表示するための文字列と取得した値をバリューとして用意
value = "FizzBuzz" + " " + i;
//iがfizzesの倍数である場合の処理
} else if (i % fizzNumber === 0) {
//ブラウザに表示するための文字列と取得した値をバリューとして用意
value = "Fizz" + " " + i;
//iがbuzzesの倍数である場合の処理
} else if (i % buzzNumber === 0) {
//ブラウザに表示するための文字列と取得した値をバリューとして用意
value = "Buzz" + " " + i;
//iがどちらの倍数でもない場合の処理
} else {
//何も表示させないものとして用意
value = '';
}
//要素を追加するためのpタグ要素を作成
const fizzbuzz = document.createElement('p');
//テキストの内容に、ループ文で取得した値を入力する
fizzbuzz.textContent = value;
//親要素であるdivタグの要素を取得
const div = document.querySelector('div')
//div要素の子要素として追加
outputArea.appendChild(fizzbuzz);
}
// fizzとbuzzの値が空ならば、outputの中身を空にして注意文を表示する
if (!fizzNumber || !buzzNumber) {
output.innerHTML = '';
output.innerHTML = '<p>Please enter an integer value !</p>'
// fizzとbuzzの値が数字以外ならば、outputの中身を空にして注意文を表示する
} else if (fizzNumber.match(/^\D+$/) || buzzNumber.match(/^\D+$/)) {
output.innerHTML = '';
output.innerHTML = '<p>Please enter an integer value !</p>'
// fizzとbuzzの値が小数ならば、outputの中身を空にして注意文を表示する
} else if (fizzNumber.match(/^-?[0-9]+\.[0-9]+$/) || buzzNumber.match(/^-?[0-9]+\.[0-9]+$/)) {
output.innerHTML = '';
output.innerHTML = '<p>Please enter an integer value !</p>'
}
});
参考サイト
JavaScript FizzBuzz問題の作り方
JavaScriptでgetElementByIdを使う方法！HTML要素を取得する
JavaScriptのappendChildメソッドの使い方を現役エンジニアが解説【初心者向け】
JavaScriptでcreateElementメソッドを使いHTMLを動的生成する方法を現役エンジニアが解説【初心者向け】