ywork2020.com

Title

HTML要素の値を操作する

目次 (INDEX)

Elementとは

Element とは次の語句からなるHTMLの要素をjavascriptで表現したものです。
element
読み: エレメント
意味: 要素

valueとは

value とは次の語句からなるjavascriptのプロパティです。
value
読み: バリュー
意味: 値、価値、値打ち

目次に戻る

Element.valueの概要

valueとは、数学でいうと「値」という意味になりますが、 プログラミングでも、数学と同じく「値」という意味で理解してください。 理解しにくい場合は、別の表現で「中身」というニュアンスでも解釈できるかもしれません。

また、HTMLの要素のことをElementといいますが、その要素の値をvalueプロパティと解釈されると分りやすいと思います。

目次に戻る

サンプルコードと実行結果

このページのサンプルでは、inputエレメントのvalueプロパティを題材にしています。 これをHTMLの言い方にすると、input要素のvalue属性とを題材にしているということです。

inputエレメントはtype属性の値を設定することでユーザーに色々な種類の入力コントロールを提供します。 このサンプルではbutton型と呼ばれるクリックできるボタンを使用しています。

サンプルコード: HTML
<body>
	<input type="button" value="ボタン" id="idButton" onclick="evtName()">
	<script>...</script>
</body>
  • 02: input要素button型をクリックしたらevtName()関数を実行するように設定。
サンプルコード: script
<script>
	let varCounter = 0;
	let elmButton = document.getElementById("idButton");
	function evtName(){
		varCounter++;
		elmButton.value = varCounter + '回クリック';
	}
</script>
  • 02: varCounterというカウンター変数を宣言 (初期値は0)
  • 03: elmButtonという要素参照の変数を宣言 (idButtonを参照)
  • 04: evtName()関数を作成 (関数名は任意です)
  • 05: varCounterをインクリメント演算子で+1
  • 06: elmButtonのvalueにvarCounterの値を代入 (「回クリック」のテキストを追加)
実行結果:
実行: ボタンをクリックするとボタンのvalueプロパティにクリックした回数を代入します

目次に戻る

valueを使用する上での要点

  1. HTML要素のvalue属性の値を操作したり、値を参照したりできるプロパティです。
  2. valueに値を代入する場合は、.value = 代入値
  3. valueの値を参照する場合は、.value

目次に戻る