Q&A
質問は編集できるので、javascriptのソースだけでなくHTMLも含めた全体のコードを提示してください。
スクリプトから予測しながらHTMLも組んでみましたが、構造があってないのか動作させられませんでした。
動作可能なら、対処法は用意してあるので回答できると思います。
【悩んでいる事】
JavaScriptで小数点の場合、「整数値を入れてください」という処理を行いたいのですが、
整数でも小数点でも、「整数値を入れてください」となってしまいます。
【どうなったら良いか】
・小数点や非数の入力の場合は「整数値を入れてください」という処理
・整数の場合は９９までFizzBuzzをループしたいです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel ="stylesheet" href="css/style.css"> <title>FizzBuzz問題</title> </head> <body> <h1>FizzBuzz問題</h1> <div class ="quest1"> <p>FizzNum:</p> <input type="text" name="fizz" class ="input1" placeholder="整数値を入力してください"></p> </div> <div class ="quest2"> <p>BuzzNum:</p> <input type="text" name="buzz" class ="input2" placeholder="整数値を入力してください"></p> </div> <button id="add">実行</button> <p>【出力】</p> <ul id="target"> </ul> </div> <script src ="js/main.js"></script> </body> </html>
'use strict' window.addEventListener('DOMContentLoaded', ()=>{ document.querySelector('#add').addEventListener('click',()=>{ const FizzNum = parseInt(document.querySelector('[name=fizz]').value); const BuzzNum = parseInt(document.querySelector('[name=buzz]').value); var targetNode=document.querySelector('#target'); var n; while(n=targetNode.firstChild){ n.parentNode.removeChild(n); } if(Number.isInteger(FizzNum)||Number.isInteger(BuzzNum)){ n=Object.assign(document.createElement('li'),{textContent:"整数値を入れてください"}); targetNode.appendChild(n); return; }else{} if(isNaN(FizzNum) ||isNaN(BuzzNum)){ n=Object.assign(document.createElement('li'),{textContent:"整数値を入れてください"}); targetNode.appendChild(n); return; }else{ for (let index = 1; index <= 99; index++) { n=document.createElement('li'); if(index % FizzNum === 0 && index % BuzzNum === 0) { n.textContent=FizzBuzz ${index}; }else if(index % FizzNum === 0) { n.textContent=Fizz ${index}; }else if(index % BuzzNum === 0){ n.textContent=Buzz ${index}; }else{ continue; } targetNode.appendChild(n); } } }); });
【試した事】
if(Number.isInteger(FizzNum)||Number.isInteger(BuzzNum) ===x)
・isIntegerだけでは小数点の判断をしてくれないのかな？と思い比較演算子を入れてみた
・17行目のreturn;を抜いてみた。for文には移行出来ましたが、整数のみ入力しても「整数値を入れてください」とFizzBuzzの記述がループされた
・if文を一つにまとめて、23行目のfor文の上に13行目からをelse ifとした
・上記で試したところ文法エラーが出たため、for文の下に13行目からを入れた
→「整数値を入れてください」とHTMLに出たが、繰り返し処理になり99回整数値を入れてくださいと出た。
他も色々試したのですが、見当違いのものが多かったため割愛させて頂きます。
お手数ですがご教示お願い致します。
回答3件
0
フォームからの入力値を parseInt() で整数化し、整数orNaNをチェックしているためです。
少数を評価したい場合、フォームからの入力値は parseFloat() や Number(value) で数値化するのが適切と思います。
投稿2020/06/07 20:59
総合スコア5434
0
ベストアンサー
少数や空文字、文字列などを弾くのであれば文字列を評価するのが
一番ラクかもしれません
投稿2020/06/08 00:38
総合スコア116724
'use strict'
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#add').addEventListener('click',()=>{
const FizzVal = document.querySelector('[name=fizz]').value;
const BuzzVal = document.querySelector('[name=buzz]').value;
const reg=/^([1-9]\d*|0)$/;
const targetNode=document.querySelector('#target');
var n;
while(n=targetNode.firstChild){
n.parentNode.removeChild(n);
}
if ( !reg.test(FizzVal) || !reg.test(BuzzVal)){
n=Object.assign(document.createElement('li'),{textContent:"整数値を入れてください"});
targetNode.appendChild(n);
}else{
const FizzNum = parseInt(FizzVal);
const BuzzNum = parseInt(BuzzVal);
for (let index = 1; index <= 99; index++) {
n=document.createElement('li');
if(index % FizzNum === 0 && index % BuzzNum === 0) {
n.textContent=`FizzBuzz ${index}`;
}else if(index % FizzNum === 0) {
n.textContent=`Fizz ${index}`;
}else if(index % BuzzNum === 0){
n.textContent=`Buzz ${index}`;
}else{
continue;
}
targetNode.appendChild(n);
}
}
});
});
ソース拝見しました（返信付ける場所まちがえてますよ＞＜）
これで動かしたら、ちゃんと整数じゃない時にエラーメッセージが出るし整数の時には
いい感じでループが回ってるようですね。
解決したのでしたら、回答の左上の数字にマウスをもっていって
解決した回答をベストアンサーに、また、解決に役立った回答には＋評価をしてあげてくださいね。
とりあえず動いているようなので、私はこれで失礼します（コロナで時差出勤なのです）
会社から長い回答がアップできないので、補足欄につけています。
在宅ワークのときはできるので長い回答をしているときは
うちにいるときです（苦笑）
nekora様＞頂いたソース改めて確認してみます。色々とご指摘頂きありがとうございます。
yamabejp＞いつもご教示頂きありがとうございます。正常に動作しております。ベストアンサーにさせて頂いております。
0
HTML全体が提示されてないので動作保障は出来かねますが
JavaScript
1// 0以上の整数のみ 2function isNumber(val){ 3 var regexp = new RegExp(/^[0-9]+(.[0-9]+)?$/); 4 return regexp.test(val); 5}
この関数を追加して、if文のところを
JavaScript
1if(Number.isInteger(FizzNum)||Number.isInteger(BuzzNum)){ 2↓ 3if(!isNumber(FizzNum) || !isNumber(BuzzNum) || !Number.isInteger(FizzNum) || !Number.isInteger(BuzzNum)){
に書き換えて試してみてください。
追記 変更するif分の条件に ! を付けました
条件４つとも整数値であった場合にtrueを返すので整数値でエラーメッセージが出てしまうので
条件４つに!をつけて 整数値でなかったらエラーメッセージが出るように修正しました
ただ、
JavaScript
1 if(index % FizzNum === 0 && index % BuzzNum === 0) { 2 n.textContent=FizzBuzz ${index}; 3 }else if(index % FizzNum === 0) { 4 n.textContent=Fizz ${index}; 5 }else if(index % BuzzNum === 0) { 6 n.textContent=Buzz ${index};
の部分、FizzBuzz、Fizz 、Buzz って定義されて無いように見受けられますが・・・
あと 後ろの${index}って何でしょう？ jQueryにしても意味がわからないしHTMLでも
jQueryを読み込んでないようですが・・・
一応jQueryを読み込ませてみましたがやはり${index}の部分でスクリプトエラーになります
提示いただいたJavaScriptコードは実際に使ってるコードですか？
なにかプラグインなど使ってませんか？ とにかく上のコードの部分でスクリプトエラーで動きません
投稿2020/06/07 21:56
編集2020/06/08 00:14総合スコア501
ありがとうございます。やってみます。
こちら試してみましたが、引き続き整数の場合も「整数化してください」と出てしまいます。。
JavaScriptに何かプラグインとか入れてらっしゃいますか？
n.textContent=Fizz ${index};のような文が複数見受けられますが、$はjQueryかな？とおもってjQueryを読み込ませましたが動きません。
そもそもFizzとBuzzは定義されてないようですが・・・FizzNum、BuzzNumは定義されてますが・・・
当方の勉強不足かもしれません。
n.textContent=Fizz ${index}; は何をどうしてる処理でしょうか？
このスクリプトエラーなしでプラグインなしで最後まで動くコードですか？
そうでないなら、動くコードに編集してください。
FizzBuzzも定義されてないですね。どうも ${index}のある行がネックでスクリプトエラーが出て動きません。
今現在テストで使われてるスクリプトのコードを編集して貼り付けていただきたいです。
そうではなく当方の勉強不足で${index}のある行に意味があるのでしたらどういう処理なのかご説明お願いできないでしょうか？
あなたの回答
tips
プレビュー
