JavaScript でフォームの中の要素の値の型を再確認しました

<input type="text"> の value に 1 を設定したら、 Number なのか、 String なのか、ちゃんと把握していなかったので、確認してみました。

値が数字の場合の確認

数字の場合も String 型になるのか確認してみました。

HTML

次のような HTML のフォームの要素を用意しました。

<form>
  <input type="checkbox" id="checkbox1" value="1" checked>
  <input type="radio" id="radio1" name="radio1" value="1" checked>
  <input type="radio" id="radio2" name="radio1" value="2">
  <select id="select1">
    <option id="option1" selected>1</option>
    <option>2</option>
  </select>
  <span id="span1"></span>
  <input type="text" id="text1" value="1">
  <textarea id="textarea1">1</textarea>
  <input type="button" id="button1" value="button1">
</form>

form タグの中の要素は次の 6 つです。

  • checkbox
  • radio
  • select
  • span
  • text
  • textarea

span タグはフォームの要素ではないですが、表示だけしたいときに使うため、入れてみました。

JavaScript

次のような JavaScript を実行しました。 HTML に埋め込んだ値だと意識しなくても文字列のようにも受け取れるので、 JavaScript から明示的に Number 型の値を設定してみました。

<script>
  document.getElementById('button1').addEventListener('click', function () {
    document.getElementById('checkbox1').value = 11;
    document.getElementById('radio1').value = 12;
    document.getElementById('option1').innerText = 13;
    document.getElementById('span1').innerText = 14;
    document.getElementById('text1').value = 15;
    document.getElementById('textarea1').value = 16;
    var t = {
      'checkbox1': { 'value': document.getElementById('checkbox1').value, 'typeof': typeof(document.getElementById('checkbox1').value) },
      'radio1': { 'value': document.getElementById('radio1').value, 'typeof': typeof(document.getElementById('radio1').value) },
      'select1': { 'value': document.getElementById('select1').value, 'typeof': typeof(document.getElementById('select1').value) },
      'span1': { 'innerText': document.getElementById('span1').innerText, 'typeof': typeof(document.getElementById('span1').innerText) },
      'text1': { 'value': document.getElementById('text1').value, 'typeof': typeof(document.getElementById('text1').value) },
      'textarea1': { 'value': document.getElementById('textarea1').value, 'typeof': typeof(document.getElementById('textarea1').value) }
    };
    console.table(t);
  });
</script>

結果

結果は次の通りでした。

(index) typeof value innerText
checkbox1 string 11
radio1 string 12
select1 string 13
span1 string 14
text1 string 15
textarea1 string 16

どれも String 型でした。

値がない場合の確認

それから、 span と input type="text" と textarea の値がない場合の型も確認してみました。

HTML

HTML です。

<form>
  <span id="span1"></span>
  <input type="text" id="text1">
  <textarea id="textarea1"></textarea>
  <input type="button" id="button1" value="button1">
</form>

JavaScript

JavaScript です。

<script>
  document.getElementById('button1').addEventListener('click', function () {
    var t = {
      'span1': { 'innerText': document.getElementById('span1').innerText, 'typeof': typeof(document.getElementById('span1').innerText), 'length': document.getElementById('span1').innerText.length },
      'text1': { 'value': document.getElementById('text1').value, 'typeof': typeof(document.getElementById('text1').value), 'length': document.getElementById('text1').value.length },
      'textarea1': { 'value': document.getElementById('textarea1').value, 'typeof': typeof(document.getElementById('textarea1').value), 'length': document.getElementById('textarea1').value.length }
    };
    console.table(t);
  });
</script>

結果

結果は次の通りでした。

(index) typeof value innerText length
span1 string 0
text1 string 0
textarea1 string 0

どれも String 型でした。 length が 0 なので、長さ 0 の文字列となるようでした。

終わり

JavaScript の中で、フォームの中の要素の値をもとに算術演算する場合は、 Number(value) のように明示的に型を変換してあげた方が優しいのかな。 String to Number のように。

逆に、 String 型でとれるので、 String(value) や value.toString() してしまうのは合理的ではないということなのかな。 String to String のように。