数値の入力

例

セ氏温度:

カ氏温度:

<script>
function conv(x) {
  document.getElementById("fahrenheit").value = 1.8 * parseFloat(x.value) + 32;
}
</script>

<p>セ氏温度: <input id="celsius" type="number" onchange="conv(this)"></p>

<p>カ氏温度: <input id="fahrenheit" readonly></p>

解説

数値を入力するには，いったん文字列を入力して，その中から数値を取り出すことになります。

文字列 s を数値に変換する関数はいくつかあります。そのうち Number(s) は，数値と解釈できない場合は，Not a Number を意味する NaN という特別な値を返します。ただし，Number("") は 0 と解釈されますので，注意を要します。

Number(s) 以外に，整数に変換する parseInt(s)，浮動小数点の数値に変換する parseFloat(s) があります。それぞれ整数の英語 integer，浮動小数点の英語 floating point に因む名前です。これらは文字列を先頭から読んでいって，数値と解釈できるところまでを解釈します。Number("") は 0 になりますが，parseFloat("") は NaN になります。

上の例では，最初の input は type="number" を指定して数値入力に限定しています。また，次の input は出力専用の readonly にしています。

次の例では小数第1位に丸めています：

<p>
  <label>セ氏温度:
    <input id="C" type="number"
	   oninput="F.value = (1.8 * C.valueAsNumber + 32).toFixed(1);">
  </label>
</p>

<p>カ氏温度: <output id="F"></output></p>

セ氏温度:

カ氏温度:

toFixed() は小数部分の桁数を指定します。toPrecision() は有効桁数を指定します。

この例のように，document.getElementById("F") は単に F または window.F と書くこともできます。もっとも，HTML Living Standard の 7.3.3 Named access on the Window object にもあるように，document.getElementById() や document.querySelector() を使うほうが安全です。