HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Number value プロパティとは？取得・設定方法を解説

HTML DOM の Input Number value プロパティは、type="number" を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、input 要素の value 属性の値を取得したり、設定したりすることができます。要素の初期値（デフォルト値）を指定する目的でも活用され、ユーザーが入力を行うとその値に更新されます。

構文

value プロパティの構文は以下の通りです。

値を設定する場合

numberObject.value = number;

ここで number には、数値フィールドに設定したい値を指定します。

サンプルコード

Input Number value プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input Number Value property</h1>
PHONE NO: <input type="number" value="222" id="NUMBER1">
<p>Get the above element value by clicking the below button</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
    function getValue() {
        var t = document.getElementById("NUMBER1").value;
        document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM Input Number value プロパティとは？取得・設定方法を解説

「Get Value」ボタンをクリックすると、以下のように入力フィールドの値が表示されます。

HTML DOM Input Number value プロパティとは？取得・設定方法を解説

コードの解説

上記のサンプルコードでは、以下のような処理が行われています。

1. 数値入力フィールドの作成

まず、type="number" の input 要素を作成し、id に「NUMBER1」を設定しています。さらに value 属性を使って、数値フィールドの初期値として「222」を指定しています。

PHONE NO: <input type="number" value="222" id="NUMBER1">

2. ボタンの作成とクリックイベント

次に「Get Value」ボタンを作成し、ユーザーがクリックすると getValue() 関数が実行されるように設定しています。

<button onclick="getValue()">Get Value</button>

3. 値の取得と表示

getValue() 関数では、getElementById() メソッドを使って input 要素を取得し、その value 属性の値を変数 t に代入しています。その後、innerHTML プロパティを使って、id が「Sample」の段落要素に取得した値を表示しています。

function getValue() {
    var t = document.getElementById("NUMBER1").value;
    document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}

このように、value プロパティを活用することで、JavaScript から数値入力フィールドの値を簡単に読み書きできます。フォームのバリデーションや動的な値の変更など、さまざまな場面で役立つ基本的なプロパティです。

  1. HTML DOM Input Emailのvalueプロパティとは？構文と使用例を解説

    HTML DOM の Input Email value プロパティは、type=email を持つ input 要素の value 属性（現在入力・設定されている値）を文字列として返します。また、このプロパティに新しい文字列を代入することで、JavaScript からメールアドレスの値を動的に設定することも可能です。 構文 value プロパティの基本的な構文は以下の通りです。 値を取得する場合 inputEmailObject.value 値を設定する場合 value 属性に任意の文字列を設定します。 inputEmailObject.value = String 使用例 それでは、Inp

  2. HTML DOM Input Time の value プロパティとは？取得・設定方法を解説

    HTML DOM の Input Time の value プロパティは、<input type=time> 要素の value 属性に設定されている値を文字列として返します。さらに、このプロパティに新しい文字列を代入することで、時刻の値を後から設定（変更）することも可能です。なお、value プロパティで扱われる時刻は「HH:MM」（24時間表記）形式の文字列である点に注意してください。構文value プロパティの基本構文は以下のとおりです。値を取得する場合inputTimeObject.value値を設定する場合inputTimeObject.value = 文字列サンプルコー