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

【HTML DOM】入力ボタンのvalueプロパティとは？値の取得・変更方法をわかりやすく解説

HTML DOM の value プロパティは、input ボタンの value 属性の内容を取得（参照）および変更するために使用されるプロパティです。

ボタンに表示されるテキストは value 属性によって決まるため、このプロパティを操作することで、JavaScript から動的にボタンの表示ラベルを読み取ったり書き換えたりすることができます。

構文

以下が構文の一覧です。

1. 値を取得する場合

object.value

2. 値を変更する場合

object.value = "text"

サンプルコード

それでは、value プロパティを使用した具体的な例を見てみましょう。下の例では、ボタンをクリックすると変更前の値が画面に表示され、同時にボタンのテキストが新しい値へと書き換わります。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM valueプロパティ</title>
<style>
    body{
        text-align:center;
    }
    .btn{
        display:block;
        margin:1rem auto;
        background-color:#db133a;
        color:#fff;
        border:1px solid #db133a;
        padding:0.5rem;
        border-radius:50px;
        width:80%;
    }
    .show-value{
        font-weight:bold;
        font-size:1.4rem;
        color:#ffc107;
    }
</style>
</head>
<body>
<h1>valueプロパティの例</h1>
<input type="submit" onclick="setValue()" class="btn" value="クリックしてテキストを変更">
<div class="show-value"></div>
<script>
    function setValue() {
        var btn = document.querySelector(".btn");
        document.querySelector(".show-value").innerHTML = "変更前の値 = " + btn.value;
        document.querySelector(".btn").value = "おめでとうございます！値の変更に成功しました";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

【HTML DOM】入力ボタンのvalueプロパティとは？値の取得・変更方法をわかりやすく解説

「クリックしてテキストを変更」ボタンをクリックすると、赤いボタンの値（表示テキスト）が以下のように変化します。

【HTML DOM】入力ボタンのvalueプロパティとは？値の取得・変更方法をわかりやすく解説

ポイントのおさらい

  • 値の取得： object.value で、現在の value 属性の内容を文字列として取得できます。
  • 値の変更： object.value = "新しいテキスト" を代入するだけで、ボタンの表示が即座に切り替わります。
  • value 属性＝ボタンのラベル： type="button" や type="submit" のボタンに表示されるテキストは、value 属性によって決まります。
  1. HTML DOM入力検索値（value）プロパティの使い方を解説

    HTML DOMのInput Search（type=search）におけるvalueプロパティは、検索フィールドのvalue属性に関連付けられたプロパティです。このプロパティを利用することで、検索フィールドに入力されている値を取得したり、JavaScriptから任意の値を設定したりすることができます。また、検索フィールドのデフォルト値を指定する目的でも使われ、ユーザーがテキストを入力すると、その値はユーザーの入力内容に置き換わります。構文valueプロパティの基本的な構文は以下の通りです。値を設定する場合searchObject.value = text;「text」の部分には、検索フィール

  2. HTML DOMのInput Submit valueプロパティとは？構文と使い方を実例で解説

    HTML DOM の input submit value プロパティは、type=submit を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、送信ボタンの value 属性の値を取得したり、新しい値を設定したりすることができます。 送信ボタンの value プロパティを変更すると、ボタンに表示されるテキストも変化します。通常、送信ボタンにはデフォルトで「Submit（送信）」というテキストが表示されますが、value プロパティを利用すれば、これを任意の文字列に自由に変更できます。 構文 value プロパティを設定する場合の基本的な