parseFloatとisIntegerを使って整数値以外が入力された時に、エラーを表示する部分の作成

parseFloatとisIntegerを使って、
フォーム内に、整数値以外が入力された時、エラーを表示する部分の作成の方法について教えて頂きたいです。
宜しくお願い致します。

<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 = fizzForm.value;
    const buzzNum = buzzForm.value; 
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>
コード

以下、parseFloatとisIntegerを自分で実装したコードです。

<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 = fizzForm.value;
    const buzzNum = buzzForm.value; 
for (let number = 1; number <= 100; number++) {
  if(number % fizzNum === 0 && number % buzzNum === 0 ) {
    const p = document.createElement('p');
    p.textContent = (isInteger.parseFloat("FizzBuzz") + " "+ number);
    document.body.appendChild(p);
  } else if(number % fizzNum === 0) {
    const p = document.createElement('p');
    p.textContent = (isInteger.parseFloat("Fizz") + " " + number);
    document.body.appendChild(p);
  } else if(number % buzzNum  ===  0) {
    const p = document.createElement('p');
    p.textContent = (isInteger.parseFloat("Buzz") + " " + number);
    document.body.appendChild(p);
  }
  }
  });
  }
  </script>
</body>
</html>
コード

自分で実装したが、35行目でエラ―発生。
エラー内容は以下の通り。

ReferenceError:
1message: "isInteger is not defined"
2stack: "ReferenceError: isInteger is not defined↵    at eval (eval at <anonymous> (file:///C:/Users/1205d/Documents/JAVASCRIPTBAISICS/index.html:17:22), <anonymous>:1:1)↵    at HTMLButtonElement.<anonymous> (file:///C:/Users/1205d/Documents/JAVASCRIPTBAISICS/index.html:34:22)"
3__proto__: Error
4コード

35行目→ p.textContent = (isInteger.parseFloat("Fizz") + " " + number);

azuapricot

2019/11/15 08:41

フォーム内に、整数値以外が入力された時、エラーを表示する部分の作成の方法これについてあなたは何を試しましたか？

kei344

2019/11/15 10:13

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうがよいと思います。

asako1010

2019/11/16 08:38

すみません。追記致します。

kei344

2019/11/16 10:48

isInteger 及び isInteger.parseFloat の定義された形跡がありません。別で定義したのであればそれも提示してください。また、「エラー発生」では無く、エラー文を具体的にコードブロックで質問文に追記ください。

asako1010

2019/11/16 11:37

追記致します。

行動規範の内容に同意します

回答3件

ベストアンサー

isIntegerとparseFloatの使い方が間違っています。

js
1let a = "42";
2console.log( Number.isInteger( a ) ); // false
3a = parseFloat( a );
4console.log( Number.isInteger( a ) ); // true

【parseFloat() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

【Number.isInteger() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger

【簡単なブラウザの開発者ツールの説明（Chrome）】
https://qiita.com/takihiyoshi/items/95c9bde8b7b8bda86ce1

【ChromeのデベロッパーツールでJSをデバッグする方法（2019年版） - ICS MEDIA】
https://ics.media/entry/190517/

投稿2019/11/16 12:09

kei344

総合スコア69407

asako1010

2019/11/17 12:30

ありがとうございます。使い方が徐々に分かってきました。デベロッパーツールの使い方についてもありがとうございます。修正いたします。

asako1010

2019/11/18 00:09

ありがとうございます。解決できました。

行動規範の内容に同意します

フォーム内に、整数値以外が入力された時、エラーを表示する部分の作成の方法について教えて頂きたいです。

JavaScriptでやる必要もないかもしれません。<input type="number">とすれば、整数以外はそもそも入力できなくなります。

投稿2019/11/15 09:01

maisumakun

総合スコア145184

kyoya0819

2019/11/16 00:03 編集

少なくとも当方環境では入力可能でした。

行動規範の内容に同意します

document.writeはjsの鬼門なので極力つかわないようにしてください

javascript
1<html lang="ja">
2<head>
3  <meta charset="utf-8">
4  <title>FizzBuzz問題</title>
5</head>
6<body>
7    <p>
8      FizzNum: <input type="number" id="fizzInput" value="" min="1" max="100"  placeholder ="整数値を入力してください">
9    </p>  
10    <p>
11      BuzzNum:<input type="number" id="buzzInput"  value="" min="1" max="100"  placeholder ="整数値を入力してください">
12    </p>
13    <button id="btn" disabled>実行</button>
14
15  <p>【出力】</p>
16  <p>整数値を入力してください</p>
17?
18<script>
19'use strict';
20[].forEach.call(document.querySelectorAll('#fizzInput,#buzzInput'),x=>{
21  x.addEventListener('change',()=>{
22    var v1=parseInt(document.querySelector('#fizzInput').value)||0;
23    var v2=parseInt(document.querySelector('#buzzInput').value)||0;
24    var flg=(v1>0 && v1<=100 && v2>0 && v2<=100);
25    console.log([v1,v2]);
26    document.querySelector('#btn').disabled=!flg;
27  });
28});
29document.querySelector('#btn').addEventListener('click', ()=>{
30  const fizzNum = parseInt(document.querySelector('#fizzInput').value);
31  const buzzNum = parseInt(document.querySelector('#buzzInput').value);
32  const out=document.querySelector('#out');
33  out.textContent="";
34  for (let i = 1; i <= 100; i++) {
35    if(i % fizzNum === 0 && i % buzzNum === 0 ) {
36      out.textContent+="FizzBuzz" + " "+ i+"\n";
37    }else if(i % fizzNum === 0) {
38      out.textContent+="Fizz" + " "+ i+"\n";
39    }else if(i % buzzNum  ===  0) {
40      out.textContent+="Buzz" + " "+ i+"\n";
41    }
42  }
43});
44</script>
45<pre id="out"></pre>