FizzBuzz問題の汎用版を作っています

Webブラウザの項目A～Dのフォームから整数値以外が入力されたらアラートで「項目A～Dは整数で入力してください。」と表示させたいです。ですが以下のコードだと整数値でもアラートが出てしまいます。
自分でも調べたのですが、整数値の判定はisIntegerで正しいと思うのですが・・・
少しご教授頂ければ幸いです。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8"/>
5  <title>sample1</title>
6</head>
7<body>
8  <form name="form1" action="#" id="form1">
9      <h1>FizzBuzz</h1><h3>*印のついた項目は必須項目です。</h3><hr>
10    【A】開始する数字*：<input type="text" id="FromNum" name="FromNum" value=""><br>
11    【B】終了する数字*：<input type="text" id="ToNum" name="ToNum" value=""><br>
12    【C】倍数①*：<input type="text" id="Multiple1" name="Multiple1" value=""><br>
13    【D】倍数②*：<input type="text" id="Multiple2" name="Multiple2" value=""><br>
14    【E】倍数①時の表示文言*：<input type="text" id="Multiple1_text" name="Multiple1_text" value=""><br>
15    【F】倍数②時の表示文言*：<input type="text" id="Multiple2_text" name="Multiple2_text" value=""><br>
16    【G】倍数①＆②時の表示文言*：<input type="text" id="Multiple3_text" name="Multiple3_text" value=""><br>
17    <input type="button" onclick="func1()" value="実行">
18  </form>
19
20  <script language="javascript" type="text/javascript">
21
22    function func1() {
23        if(document.form1.FromNum.value == "" || document.form1.ToNum.value == "" || document.form1.Multiple1.value == ""
24           || document.form1.Multiple2.value == "" || document.form1.Multiple1_text.value == "" || document.form1.Multiple2_text.value == ""
25           || document.form1.Multiple3_text.value == ""){
26          alert("必須項目を入力して下さい。");
27	        return false;
28        }
29           
30        var FromNum = document.getElementById("FromNum").value;
31        var ToNum = document.getElementById("ToNum").value;       
32        var Multiple1 = document.getElementById("Multiple1").value;
33        var Multiple2 = document.getElementById("Multiple2").value;
34/*************************整数値を受け付けない処理部分************************************/
35        if (Number.isInteger(FromNum) != true || Number.isInteger(ToNum) != true || Number.isInteger(Multiple1) != true || Number.isInteger(Multiple2) != true) {
36          alert("項目A～Dは整数で入力してください。");
37          return false;
38        }
39/*************************整数値を受け付けない処理部分************************************/
40        var Multiple1_text = document.getElementById("Multiple1_text").value;
41        var Multiple2_text = document.getElementById("Multiple2_text").value;
42        var Multiple3_text = document.getElementById("Multiple3_text").value;
43
44        
45
46        for (FromNum; FromNum <= ToNum; FromNum++) {
47            if (FromNum % Multiple1 === 0 && FromNum % Multiple2 === 0) {
48                document.write(Multiple3_text + "<br />");
49            } else if (FromNum % Multiple1 === 0) {
50                document.write(Multiple1_text + "<br />");
51            } else if (FromNum % Multiple2 === 0) {
52                document.write(Multiple2_text + "<br />");
53            } else {
54                document.write(FromNum + "<br />"); 
55            }
56        }
57        document.write("<p><a href=\"FizzBuzz.html\">トップページへ戻る</a></p>");
58    }
59  </script>
60
61
62</body>
63</html>

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

回答3件

ベストアンサー

input type="text" の value はテキストなので、数値化してください。

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

投稿2019/10/30 03:16

編集2019/10/30 03:22

kei344

総合スコア69596

Taka787

2019/10/30 03:33 編集

早速ご教授頂きありがとうございます。 ``` if (Number.isInteger(parseInt("FromNum")) != true || Number.isInteger(parseInt("ToNum")) != true || Number.isInteger(parseInt("Multiple1")) != true || Number.isInteger(parseInt("Multiple2")) != true) { alert("項目A～Dは整数で入力してください。"); return false; } ``` 上記コードのように訂正しましたが結果は変わりませんでした。このやり方で正しいのでしょうか？

kei344

2019/10/30 03:35

parseInt("FromNum") は文字列「FromNum」を数値化しようとしています。なので正しくありません。

Taka787

2019/10/30 03:54

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

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

たとえば正規表現

javascript
1const reg=/^\d+$/;
2console.log(reg.test("123"));
3console.log(reg.test("12.3"));
4console.log(reg.test("abc"));

投稿2019/10/30 03:20

yambejp

総合スコア116694

Taka787

2019/10/30 03:55

ご回答ありがとうございました。正規表現がいまいちよく理解できていませんので、勉強します(⌒∇⌒)

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

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8"/>
5  <title>sample1</title>
6</head>
7<body>
8  <form name="form1" action="#" id="form1">
9      <h1>FizzBuzz</h1><h3>*印のついた項目は必須項目です。</h3><hr>
10    【A】開始する数字*：<input type="text" id="FromNum" name="FromNum" value=""><br>
11    【B】終了する数字*：<input type="text" id="ToNum" name="ToNum" value=""><br>
12    【C】倍数①*：<input type="text" id="Multiple1" name="Multiple1" value=""><br>
13    【D】倍数②*：<input type="text" id="Multiple2" name="Multiple2" value=""><br>
14    【E】倍数①時の表示文言*：<input type="text" id="Multiple1_text" name="Multiple1_text" value=""><br>
15    【F】倍数②時の表示文言*：<input type="text" id="Multiple2_text" name="Multiple2_text" value=""><br>
16    【G】倍数①＆②時の表示文言*：<input type="text" id="Multiple3_text" name="Multiple3_text" value=""><br>
17    <input type="button" onclick="func1()" value="実行">
18  </form>
19
20  <script language="javascript" type="text/javascript">
21
22    function func1() {
23        if(document.form1.FromNum.value == "" || document.form1.ToNum.value == "" || document.form1.Multiple1.value == ""
24           || document.form1.Multiple2.value == "" || document.form1.Multiple1_text.value == "" || document.form1.Multiple2_text.value == ""
25           || document.form1.Multiple3_text.value == ""){
26          alert("必須項目を入力して下さい。");
27	        return false;
28        }
29           
30        var FromNum = document.getElementById("FromNum").value;
31        var ToNum = document.getElementById("ToNum").value;       
32        var Multiple1 = document.getElementById("Multiple1").value;
33        var Multiple2 = document.getElementById("Multiple2").value;
34
35        if (Number.isInteger(parseFloat(FromNum)) != true || Number.isInteger(parseFloat(ToNum)) != true || Number.isInteger(parseFloat(Multiple1)) != true || Number.isInteger(parseFloat(Multiple2)) != true) {
36          alert("項目A～Dは整数で入力してください。");
37          return false;
38        }
39        
40        if(FromNum > ToNum){
41          alert("項目Bは項目Aより大きい値を入力してください。")
42          return false;
43        }
44
45        var Multiple1_text = document.getElementById("Multiple1_text").value;
46        var Multiple2_text = document.getElementById("Multiple2_text").value;
47        var Multiple3_text = document.getElementById("Multiple3_text").value;
48
49        
50
51        for (FromNum; FromNum <= ToNum; FromNum++) {
52            if (FromNum % Multiple1 === 0 && FromNum % Multiple2 === 0) {
53                document.write(Multiple3_text + "<br />");
54            } else if (FromNum % Multiple1 === 0) {
55                document.write(Multiple1_text + "<br />");
56            } else if (FromNum % Multiple2 === 0) {
57                document.write(Multiple2_text + "<br />");
58            } else {
59                document.write(FromNum + "<br />"); 
60            }
61        }
62        document.write("<p><a href=\"FizzBuzz.html\">トップページへ戻る</a></p>");
63    }
64  </script>
65
66
67</body>
68</html>