質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

2835閲覧

JavaScript 小数点の場合のエラーを出す方法

mikeikeikename

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/07 20:28

編集2020/06/07 22:50

【悩んでいる事】
JavaScriptで小数点の場合、「整数値を入れてください」という処理を行いたいのですが、
整数でも小数点でも、「整数値を入れてください」となってしまいます。

【どうなったら良いか】
・小数点や非数の入力の場合は「整数値を入れてください」という処理
・整数の場合は99まで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回整数値を入れてくださいと出た。
他も色々試したのですが、見当違いのものが多かったため割愛させて頂きます。

お手数ですがご教示お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nekora

2020/06/07 21:43

質問は編集できるので、javascriptのソースだけでなくHTMLも含めた全体のコードを提示してください。 スクリプトから予測しながらHTMLも組んでみましたが、構造があってないのか動作させられませんでした。 動作可能なら、対処法は用意してあるので回答できると思います。
mikeikeikename

2020/06/07 22:50

失礼致しました。 HTMLを記載致しました。宜しくお願い致します。
guest

回答3

0

フォームからの入力値を parseInt() で整数化し、整数orNaNをチェックしているためです。

少数を評価したい場合、フォームからの入力値は parseFloat()Number(value) で数値化するのが適切と思います。

投稿2020/06/07 20:59

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikeikeikename

2020/06/07 22:51

承知致しました。試してみます。
guest

0

ベストアンサー

少数や空文字、文字列などを弾くのであれば文字列を評価するのが
一番ラクかもしれません

投稿2020/06/08 00:38

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/06/08 00:38

'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

2020/06/08 01:24 編集

ソース拝見しました(返信付ける場所まちがえてますよ><) これで動かしたら、ちゃんと整数じゃない時にエラーメッセージが出るし整数の時には いい感じでループが回ってるようですね。 解決したのでしたら、回答の左上の数字にマウスをもっていって 解決した回答をベストアンサーに、また、解決に役立った回答には+評価をしてあげてくださいね。 とりあえず動いているようなので、私はこれで失礼します(コロナで時差出勤なのです)
yambejp

2020/06/08 01:20

会社から長い回答がアップできないので、補足欄につけています。 在宅ワークのときはできるので長い回答をしているときは うちにいるときです(苦笑)
mikeikeikename

2020/06/08 02:17

nekora様>頂いたソース改めて確認してみます。色々とご指摘頂きありがとうございます。 yamabejp>いつもご教示頂きありがとうございます。正常に動作しております。ベストアンサーにさせて頂いております。
guest

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)){ 23if(!isNumber(FizzNum) || !isNumber(BuzzNum) || !Number.isInteger(FizzNum) || !Number.isInteger(BuzzNum)){

に書き換えて試してみてください。
追記 変更するif分の条件に ! を付けました
条件4つとも整数値であった場合にtrueを返すので整数値でエラーメッセージが出てしまうので
条件4つに!をつけて 整数値でなかったらエラーメッセージが出るように修正しました

ただ、

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
nekora

総合スコア501

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikeikeikename

2020/06/07 22:51

ありがとうございます。やってみます。
mikeikeikename

2020/06/07 23:15

こちら試してみましたが、引き続き整数の場合も「整数化してください」と出てしまいます。。
nekora

2020/06/07 23:29

JavaScriptに何かプラグインとか入れてらっしゃいますか? n.textContent=Fizz ${index};のような文が複数見受けられますが、$はjQueryかな?とおもってjQueryを読み込ませましたが動きません。 そもそもFizzとBuzzは定義されてないようですが・・・FizzNum、BuzzNumは定義されてますが・・・ 当方の勉強不足かもしれません。 n.textContent=Fizz ${index}; は何をどうしてる処理でしょうか? このスクリプトエラーなしでプラグインなしで最後まで動くコードですか? そうでないなら、動くコードに編集してください。
nekora

2020/06/07 23:48

FizzBuzzも定義されてないですね。どうも ${index}のある行がネックでスクリプトエラーが出て動きません。 今現在テストで使われてるスクリプトのコードを編集して貼り付けていただきたいです。 そうではなく当方の勉強不足で${index}のある行に意味があるのでしたらどういう処理なのかご説明お願いできないでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問