JavaScriptの条件分岐の判定がある値でおかしい。

Question

前提・実現したいこと

JavaScriptで計算システムを作っています。
ある機能の条件分岐を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

1.Web上で
  hs[i+1]["position"]に10
  full_lengthに10
を入力すると、console上では
  a>b   -> false
  a<b   -> false
  a===b -> true
となります。ここは問題ないです。

2.Web上で
  hs[i+1]["position"]に11
  full_lengthに10
を入力すると、console上では
  a>b   -> true
  a<b   -> false
  a===b -> false
となります。ここも問題ないです。

3.Web上で
  hs[i+1]["position"]に9
  full_lengthに10
を入力すると、console上では
  a>b   -> true
  a<b   -> false
  a===b -> false
となり、判定がおかしいです。
また、hs[i+1]["position"]に1以下の値を入力すると正しく判定されます。

該当のソースコード

            <div class="lng__table">
                <div class="tab"><!-- btn -->
                    <div class="general_btn tab_btn"><img src="./common/img/general.jpg"></div>
                    <div class="hinge_support_btn tab_btn"><img src="./common/img/hinge_support.jpg"></div>
                    <div class="start" id="proStart"></div>
                </div>
                <div class="data">
                    <div class="general date_cont">
                        <h3></h3>
                        <div class="number">
                            <p class="row_desc"></p>
                            <input id="full_length" class="row_value" type="number" name="" value="0" min="0">
                            <select id="full_length_unit">
                                <option value="m">m</option>
                                <option value="km">km</option>
                                <option class="cm">cm</option>
                                <option value="mm">mm</option>
                            </select>
                        </div>
                    </div>
                    <div class="hinge_support date_cont">
                        <h3></h3>
                        <div class="number">
                            <p class="row_desc"></p>
                            <input id="hs_num" class="row_value" type="number" name="" value="0" min="0">
                        </div>
                        <div class="parts" id="hinge_support_parts"></div>
                    </div>
                </div><!-- date -->
            </div><!-- lng_table -->

   $(".hinge_support .number input").on('input', function(event) {
      var codes = "";
      for (var i=0; i < $(this).val(); i++) {
         var code = '<div class="part part_'+ (i+1) +'">'
                  +'<p class="part_title">'+ (i+1) +'個目</p>'
                  +'<div class="position">'
                     +'<p class="row_desc">位置</p>'
                     +'<input id="hs_'+ (i+1) + '_posit" class="row_value" type="number" name="" id="" value="0" min="0">'
                     +'<select id="hs_'+ (i+1) + '_posit_unit">'
                         +'<option value="m">m</option>'
                         +'<option value="km">km</option>'
                         +'<option class="cm">cm</option>'
                         +'<option value="mm">mm</option>'
                     +'</select>'
                 +'</div>'
             +'</div>';
         codes = codes + code;
      }
      document.getElementById('hinge_support_parts').innerHTML = codes;
      if ( $(this).val() == 0) {
      document.getElementById('hinge_support_parts').innerHTML = " ";
      }
   });

   document.getElementById("proStart").onclick = function(){
      var full_length = unitChange($("#full_length").val(),$('#full_length_unit').val());

      var hs = [];
      hs[0] = $("#hs_num").val();
      i = 1;
      for (var j = 0; j < hs[0]; j++) {
         hs[i] = {};
         hs[i]["position"] = unitChange($("#hs_"+ i + "_posit").val(),$("#hs_"+ i + "_posit_unit").val());
         i++;
      }

　　　for (var i = 0; i < hs[0] ;i++) {
　　　   var a = hs[i+1]["position"];
  　　　 var b = full_length;
  　　　 console.log(a);
 　　　  console.log(b);
 　　　  console.log(a>b);
 　　　  console.log(a<b);
 　　　  console.log(a===b);
　　　}
　　};

   function unitChange(value,unit) {
      if(unit == "km") {
         value /= 1000;
      } else if(unit == "cm") {
         value *= 100;
      } else if(unit == "mm") {
         value *= 1000;
      }
      if(unit == "kN") {
         value /= 1000;
      }
      return value;
   }

試したこと

console上でa,bそれぞれの値を確認したうえでもおかしな判定が出ます。
例）a:9 , b:10 が与えられている。
console.log(a) -> 9
console.log(b) -> 10
console.log(a>b) -> true

Comments

[kei344]

（質問文は編集できます）変数hs や変数full_length の定義も質問文に追記してください。

[helloinf]

すみません、修正しました。コンソール上ではa,bの値は把握できるのですが、その変数を用いて条件式を立てると結果がおかしいです。把握したa,bの値を使って直接条件式を立てると正しい判定はでます。

[kei344]

何度もすみません、HTMLが無いと状況が再現しきれません。#hs_num や #hs_"+ i + "_posit_unit 等にどのような入力があるのかがわかりません。

[helloinf]

こちらこそ、申し訳ないです。HTMLコード追加しました。入力欄が増えたり減ったりする仕組みなのですが、この場合h[0]は１とすることで、入力欄は１個のみとしています。

[kei344]

HTMLのどこに何を入力して、どこを押した際に問題の状況になるのでしょう。

[helloinf]

HTMLにおいて
.date .general .number input（id=full_length)に10を入力。
.date .general .number select(id=full_length_unit)はmを選択。（m以外が選択された場合単位換算を行うため、unitChenge()関数上ではmは無視されます。）
.date .hinge_support .number input(id=hs_num)に1を入力。
すると.date .hinge_support .parts 内に .part_1が生成される。
JavaScriptで生成されたHTML上において
.date .hinge_support .parts .part_1 .position inputに9を入力。
.date .hinge_support .parts .part_1 .position selectはmを選択。
以上のデータを入力して .lng__table .tab .start(id=proStart)をクリックした場合に問題が発生します。

Answer 1

input要素の値は文字列なので、そのためだと思います。

console.log(a,b,a>b,a<b,a===b,typeof a,typeof b);
//          9 10 true false false string string
```**動くサンプル：**[https://jsfiddle.net/b03xa1y5/](https://jsfiddle.net/b03xa1y5/)

---

【HTMLInputElement - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement](https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement)

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

Comments

[helloinf]

型がおかしかったんですね！
すごく悩んでいたので、助かりました。
ご丁寧に対応ありがとうございました。

[oikashinoa]

スマホからなので簡単に。

console.log(typeof a)
で型を調べると良いですよ

[helloinf]

調べてみます！
そのような機能は知らなかったので助かります！