Q&A
いただいた内容で修正したところすぐに解決しました！
0は自然数に含めないことを利用してこのような書き方もできるんですね。
感動しました????
ありがとうございました????♂️
前提・実現したいこと
JavaScriptを使ってFizzBuzzの作成をしています。
付けたい機能は以下の通りです。
①FizzとBuzzそれぞれひとつずつ入力用のinputタグを用意し、入力された値の倍数を小さい順に表示する。
例） Fizz:2
Buzz:4
Fizz:4
Buzz:8
②FizzとBuzzの公倍数の時はFizzBuzzと表示させる。
例） Fizz:2
FizzBuzz:4
Fizz:6
FizzBuzz:8
③入力された値が空白もしくは文字列の場合は 「整数値を入力してください」 とエラーメッセージを表示させる（片方が数字、片方が文字列の場合でもエラーメッセージを表示させる）。
発生している問題・エラーメッセージ
①&&の条件に引っ掛からず、片方に数値を入力し片方に文字列を入力した場合でもループ処理が発火してしまう。
②どちらとも空白、どちらにも文字列を入力し実行ボタンを押してもエラー文章が表示されない。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="style.css"> 8 <title>FizzBuzz</title> 9</head> 10 11<body> 12 <h1>FizzBuzz問題</h1> 13 FizzNum：<input type="text" id="fizzNum" placeholder="整数値を入力してください" value=""> 14 <br> 15 BuzzNum：<input type="text" id="buzzNum" placeholder="整数値を入力してください" value=""> 16 <br> 17 <button type="button" id="output">実行</button> 18 <h3>【出力】</h3> 19 20 <ul id="fizzbuzzList"></ul> 21 22 <script src="main.js"></script> 23</body> 24 25</html>
JavaScript
1const button = document.getElementById("output"); 2const fizzbuzzList = document.getElementById("fizzbuzzList"); 3 4const listAdd = (a) => { 5 const li = document.createElement("li"); 6 li.innerHTML = a; 7 fizzbuzzList.appendChild(li); 8}; 9 10button.addEventListener("click", () => { 11 const fizzNum = Number(document.getElementById("fizzNum").value); 12 const buzzNum = Number(document.getElementById("buzzNum").value); 13 14 if (typeof fizzNum === "number" && typeof buzzNum === "number") { 15 for (i = 1; i < 100; i++) { 16 if (i % fizzNum === 0 && i % buzzNum === 0) { 17 listAdd("FizzBuzz" + i); 18 } else if (i % fizzNum === 0) { 19 listAdd("Fizz" + i); 20 } else if (i % buzzNum === 0) { 21 listAdd("Buzz" + i); 22 } 23 } 24 } else if (fizzNum == "" || buzzNum == "") { 25 listAdd("整数値を入力してください"); 26 } else if (typeof fizzNum === "string" || typeof buzzNum === "string") { 27 listAdd("整数値を入力してください"); 28 } 29});
試したこと
初めは入力された値をperseIntでnumber型に変換してやってみましたが、その場合入力された値が文字列でもnumber型に変換される為、Number()を使用して変換してみましたが、思うような挙動にはなりませんでした。
ループ処理に関しては思うように動いてくれてはいますがif文に関しては思うような挙動になってくれません。
いろいろ調べてみましたがお手上げ状態の為、ご教授いただけると助かります。
よろしくお願い致します。
補足情報（FW/ツールのバージョンなど）
使用エディタ：VSCode
回答2件
0
こんにちは。
これが原因では。
**Number 型は、**IEEE 754 での倍精度浮動小数点数 ( -(253 − 1) から 253 − 1) の間の数値) です。浮動小数点数の表現に加えて、3 つの記号的な値 +Infinity, -Infinity, NaN ("Not a Number") があります。
JavaScript のデータ型とデータ構造 - JavaScript | MDN
typeof - JavaScript | MDN
投稿2020/11/26 02:19
総合スコア36946
0
ベストアンサー
Numberで変換できなかった場合NaNになりますがtypeofでNaNはnumber判定になります。
参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof
また、入力制限を整数値にしていますが、やりたい内容を考えるに負の数字や0は適していないと考えられますので条件を自然数に変更してはどうでしょうか？
その場合
JavaScript
1if (typeof fizzNum === "number" && typeof buzzNum === "number") {
の判定を
JavaScript
1if (fizzNum > 0 && buzzNum > 0) {
に変更すればいいと思います。
投稿2020/11/26 02:32
総合スコア1426
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/26 03:17