Q&A
フォームに入力された値が整数値のとき（＝Number.isInteger(fizzNum)とNumber.isInteger(buzzNum)がtrueのとき）にfor文を実装させ、そうではないときに、エラーを表示させるという処理をしたいと思っています。
しかし、小数点だけでなく、整数値を入力した時も、アラート（エラーメッセージ）が出てしまいます。
また、整数値をフォームに入力した時に実行ボタンを押しても計算結果が表示されません。
調べた結果、
「if (fizzNum === Number.isInteger(fizzNum) && buzzNum === Number.isInteger(buzzNum)); {」
の箇所がおかしいのかと推測しています。
特に「Number.isInteger(fizzNum)」「Number.isInteger(buzzNum)」が間違っているのではないかと思うのですが、どう変更すればよいか分かりません。
「fizzNumとbuzzNumが整数値以外の時」限定でエラーメッセージを出したい。
また、整数値をフォームに入力した時に実行ボタンを押しても計算結果が表示したい。
のですが、どこ直せばよいでしょうか？
教えて頂けるとありがたいです。
<html lang="ja"> <head> <meta charset="utf-8"> <title>FizzBuzz問題</title> </head> <body> <p> FizzNum: <input type="text" id="fizzInput" value="" placeholder ="整数値を入力してください"> </p> <p> BuzzNum:<input type="text" id="buzzInput" value="" placeholder ="整数値を入力してください"> </p> <button id="btn">実行</button> <p>【出力】</p> <p>整数値を入力してください</p> <script> 'use strict'; { const fizzForm = document.getElementById ('fizzInput'); const buzzForm = document.getElementById ('buzzInput'); const btn = document.getElementById('btn'); btn.addEventListener('click', function() { const fizzNum = parseFloat(fizzForm.value); const buzzNum = parseFloat(buzzForm.value); if (fizzNum === Number.isInteger(fizzNum) && buzzNum === Number.isInteger(buzzNum)) { console.log(Number.isInteger(fizzNum)); console.log(Number.isInteger(buzzNum)); for (let number = 1; number <= 100; number++) { if(number % fizzNum === 0 && number % buzzNum === 0) { const p = document.createElement('p'); p.textContent = ("FizzBuzz" + " "+ number); document.body.appendChild(p); } else if(number % fizzNum === 0) { const p = document.createElement('p'); p.textContent = ("Fizz" + " " + number); document.body.appendChild(p); } else if(number % buzzNum === 0) { const p = document.createElement('p'); p.textContent = ("Buzz" + " " + number); document.body.appendChild(p); } } } else { console.log(alert('エラーメッセージ「小数点はNG」')); } }); } </script> </body> </html> コード
【追記】
最初のif とelseの使い方が間違っていたことが分かったので、コードを書き直しました。
整数値を入れたときもエラーメッセージが出ます。
また、小数点を入れたときも計算されてしまいます。
以下の箇所がおかしい気がしたので、調べたのですが手がかりは得られませんでした。
else {
console.log(alert('エラーメッセージ「小数点はNG」'));
}
何を改善すべきなのでしょうか？
<html lang="ja"> <head> <meta charset="utf-8"> <title>FizzBuzz問題</title> </head> <body> <p> FizzNum: <input type="text" id="fizzInput" value="" placeholder ="整数値を入力してください"> </p> <p> BuzzNum:<input type="text" id="buzzInput" value="" placeholder ="整数値を入力してください"> </p> <button id="btn">実行</button> <p>【出力】</p> <p>整数値を入力してください</p> <script> 'use strict'; { const fizzForm = document.getElementById ('fizzInput'); const buzzForm = document.getElementById ('buzzInput'); const btn = document.getElementById('btn'); btn.addEventListener('click', function() { const fizzNum = parseFloat(fizzForm.value); const buzzNum = parseFloat(buzzForm.value); if (fizzNum === new Boolean(fizzNum) && buzzNum === new Boolean(buzzNum)) { console.log(Number.isInteger(fizzNum)); console.log(Number.isInteger(buzzNum)); } else { console.log(alert('エラーメッセージ「小数点はNG」')); } for (let number = 1; number <= 100; number++) { if(number % fizzNum === 0 && number % buzzNum === 0) { const p = document.createElement('p'); p.textContent = ("FizzBuzz" + " "+ number); document.body.appendChild(p); } else if(number % fizzNum === 0) { const p = document.createElement('p'); p.textContent = ("Fizz" + " " + number); document.body.appendChild(p); } else if(number % buzzNum === 0) { const p = document.createElement('p'); p.textContent = ("Buzz" + " " + number); document.body.appendChild(p); } } }); } </script> </body> </html> コード
以下、3回目の書き直しです。
「整数値である場合、処理実行」とするために「/^([1-9]\d*|0)$/」
を使用しました。
参考にした記事https://webllica.com/javascript-number-check-function/
しかし、小数点でないときにも、アラート（エラーメッセージ）が出てしまう状況。
<html lang="ja"> <head> <meta charset="utf-8"> <title>FizzBuzz問題</title> </head> <body> <p> FizzNum: <input type="text" id="fizzInput" value="" placeholder ="整数値を入力してください"> </p> <p> BuzzNum:<input type="text" id="buzzInput" value="" placeholder ="整数値を入力してください"> </p> <button id="btn">実行</button> <p>【出力】</p> <p>整数値を入力してください</p> <script> 'use strict'; { const fizzForm = document.getElementById ('fizzInput'); const buzzForm = document.getElementById ('buzzInput'); const btn = document.getElementById('btn'); btn.addEventListener('click', function() { const fizzNum = parseFloat(fizzForm.value); const buzzNum = parseFloat(buzzForm.value); if (fizzNum === (/^([1-9]\d*|0)$/) && buzzNum === (/^([1-9]\d*|0)$/)) { console.log(Number.isInteger(fizzNum)); console.log(Number.isInteger(buzzNum)); } else { console.log(alert('エラーメッセージ「小数点はNG」')); } for (let number = 1; number <= 100; number++) { if(number % fizzNum === 0 && number % buzzNum === 0) { const p = document.createElement('p'); p.textContent = ("FizzBuzz" + " "+ number); document.body.appendChild(p); } else if(number % fizzNum === 0) { const p = document.createElement('p'); p.textContent = ("Fizz" + " " + number); document.body.appendChild(p); } else if(number % buzzNum === 0) { const p = document.createElement('p'); p.textContent = ("Buzz" + " " + number); document.body.appendChild(p); } } }); } </script> </body> </html> コード
回答1件
0
ベストアンサー
何と比較しているか確認しましょう。
【Number.isInteger() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger#Return_value
返り値
渡された値が整数かどうかを示す Boolean です。
投稿2019/11/18 15:00
総合スコア69596
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/18 15:44
2019/11/18 16:37
2019/11/19 01:08
2019/11/19 01:53
2019/11/19 03:59