javascript input.valueの型の種類に対する質問

Question

input要素のvalueは数値型か文字列型なのかがよく分かりません。

(html)
<select id="paymentSelect" name="paymentSelect">
  <option value="0">選択してください</option>
  <option value="1">銀行振込</option>
  <option value="2">クレジットカード</option>
</select>

paymentSelect.value:文字列型

(html)
<input type="text" id="heightInput" name="height" placeholder="身長">

(javascript)
let heightInput = document.getElementById("heightInput");

heightInput.value:数値型？

Comments

[miyabi_pudding]

コードは、<code>ボタンで挿入される、``` ```の間に記載ください。
ひとまず回答させていただきます。

Answer 1

実際にやってみれば明白ですが

console.log(typeof paymentSelect.value); // string
let heightInput = document.getElementById("heightInput");
console.log(typeof heightInput.value); // string

https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement
https://html.spec.whatwg.org/multipage/input.html#htmlinputelement

https://developer.mozilla.org/ja/docs/Web/API/HTMLSelectElement
https://html.spec.whatwg.org/multipage/form-elements.html#htmlselectelement

Comments

[taka_oct092018]

x_x様、今回も解説ありがとうございます。
コンソールと「typeof」を使えば良かったのですね。
具体的な解決方法を示して下さり、ありがとうございます。

Answer 2

数値型か文字列型かの判定であればtypeofを使うと判定できます。

意図的に変換してから使いたいのであればNumber()やString()などを使えば良いでしょう。

Comments

[taka_oct092018]

dice142様
返信ありがとうございます。

具体的な解決方法を教えていただき、ありがとうございます。

Answer 3

数値しかあつかえないnumberであってもvalueの型はstringです

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#num').addEventListener('change',function(e){
    console.log(typeof e.target.value);
  });
});
</script>
<input type="number" id="num">

Comments

[taka_oct092018]

yambejp様
返信ありがとうございます。

javascriptは変数の型が分かりにくいですね。
今後も勉強に励みます。

Answer 4

JavaScriptにおいて、型を確認するには、typeofキーワードを使えば行えるので、それで確認されるといいでしょう。

<input type="text" id="heightInput" name="height" placeholder="身長">

<script>
let heightInput = document.getElementById("heightInput");
console.log(typeof heightInput.value);
</script>

今回は、string型になるかと思います。
string型になるinputのtypeは、

• text
• tel
• url
• password

などです。
string型が多いです。

Comments

[taka_oct092018]

miyabi_takatsuk様
返信ありがとうございます。

初学者ゆえ「typeof」の使い方が分かっていませんでした。
具体例も上げていただき、より理解が深まりました。