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

HTMLのbutton要素におけるvalue属性の使い方を解説

<button>要素のvalue属性は、ボタンの初期値を設定するために使用される属性です。通常、この属性は<form>（フォーム）内で設定しますが、本記事ではフォームを使用しないシンプルな例を通じて、その基本的な仕組みを解説します。

value属性の基本構文

value属性の構文は以下の通りです。

<button value="値">

上記の「値」の部分に、ボタンの初期値として渡したい文字列を指定します。

それでは、実際に<button>要素でvalue属性を実装するサンプルコードを見ていきましょう。

実装例

次の例では、2つのボタンにそれぞれ異なるvalue属性を設定し、JavaScriptを使ってクリックされたボタンの値を画面に表示しています。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックすると、学習コンテンツの詳細が表示されます...</p></br></br>
<button id = "button1" value = "Learning" onclick = "demo1()">チュートリアルを取得</button>
<button id = "button2" value = "InterviewAnswers" onclick = "demo2()">面接Q&Aを取得</button>
<p id = "myid"></p>
<script>
    function demo1() {
        var val1 = document.getElementById("button1").value;
        document.getElementById("myid").innerHTML = val1;
    }
    function demo2() {
        var val1 = document.getElementById("button2").value;
        document.getElementById("myid").innerHTML = val1;
    }
</script>
</body>
</html>

このコードをブラウザで開くと、最初は以下のように表示されます。

HTMLのbutton要素におけるvalue属性の使い方を解説

「チュートリアルを取得」ボタンをクリックすると、出力は以下のようになります。

HTMLのbutton要素におけるvalue属性の使い方を解説

同様に、「面接Q&Aを取得」ボタンをクリックした場合の出力は以下の通りです。

HTMLのbutton要素におけるvalue属性の使い方を解説

サンプルコードの仕組み

上記の例では、ボタンのvalue属性の値を取得して変数に格納するためのJavaScript関数を作成しています。そのうちの一つがdemo1()関数です。

function demo1() {
    var val1 = document.getElementById("button1").value;
    document.getElementById("myid").innerHTML = val1;
}

この関数では、まずdocument.getElementById()メソッドを使ってID「button1」のボタン要素を取得し、その.valueプロパティでvalue属性の値を変数val1に代入しています。その後、取得した値をID「myid」の段落要素のinnerHTMLに設定することで、画面への表示を行っています。

この結果は、ボタンがクリックされたタイミングで表示されます。ボタンのonclick属性に上記のdemo1()関数を呼び出す処理を設定することで実現しています。

<button id = "button1" value = "Learning" onclick = "demo1()">
    チュートリアルを取得
</button>

このように、value属性とJavaScriptのonclickイベントを組み合わせることで、ボタンごとに異なるデータを持たせ、クリック時にその値を活用することができます。

  1. HTMLのopen属性とは？details要素の使い方とサンプルコード解説

    HTMLのopen属性は、details要素の内容をHTMLドキュメント上で最初から表示状態（開いた状態）にするためのブール属性です。この属性を指定すると、ユーザーがsummary要素をクリックしなくても、ページ読み込み時にdetails要素内のコンテンツが展開された状態で表示されます。 構文 open属性の基本的な構文は以下のとおりです。 <details open></details> open属性はブール属性のため、値を指定せずに属性名だけで記述できます。属性を省略した場合、details要素は初期状態で閉じられ、ユーザーがsummary要素をクリックしたときに初

  2. HTMLのvalue属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのvalue属性は、HTMLドキュメント内で要素の初期値（デフォルト値）を定義するための属性です。この属性は、button、input、meter、li、option、progress、paramといったHTML要素に対して使用できます。value属性はフォームやUIコンポーネントにおいて重要な役割を果たします。例えば、input要素では入力欄にあらかじめ表示されるテキストを指定でき、meter要素やprogress要素では現在の進捗状況を数値で表現できます。構文value属性の基本的な構文は以下のとおりです。<tagname value="text">