javaScriptでラベルの値を変更する方法（真）

javaScriptでラベルの値を変更する方法（真）

少し前に、javaScriptでラベルの値を変更する（ように見せかける）方法という記事（javaScriptでラベルの値を変更する方法）を書いたのですが、親切な方が、ラベルの値を変更する正しい方法を教えてくれました。

という訳で、試して見ました。

方法１（innerText）

どうやら、innerTextというプロパティを使用することで、タグ内の内容を取得、変更することが出来るらしいです。

まず、HTMLを準備します。

<br>
<INPUT id="labelCode1ID" tabindex="-1" value="000" Style="width:30px;">
<LABEL id="labelName1ID">テスト</LABEL>
<br><br>
<INPUT type="button" value="変更" Style="width: 80px;" onClick="JavaScript:testSelect();">

前回との変更点は、INPUTタグをLABELタグに変更、name属性を削除、id属性を追加です。
まぁ、nameを削除してidで書き直す必要はなかったんですけどね。

んで、javaScriptはこうします。

function testSelect() {

	if (document.getElementById("labelCode1ID").value == '999') {
		document.getElementById("labelCode1ID").value = '000';
		document.getElementById("labelName1ID").innerText = 'テスト';
	} else {
		document.getElementById("labelCode1ID").value = '999';
		document.getElementById("labelName1ID").innerText = '変えました';
	}

	return true;
}

getElementByIdで対象とする要素を取得して、innerTextプロパティの値を書き換えてあげればＯＫです。

なーるほど、こうすれば良かったんですね。
IE8とChromeで試したところ、問題なく動作してくれました。

方法２（textContent）

いろいろ調べたんですが、innerTextプロパティってFireFoxでは対応してないらしいんですよね。
FireFoxの場合は、innerTextの代わりにtextContentを使用しないといけないようです。

javaScriptを下記の通りに修正します。

function testSelect() {

	if (document.getElementById("labelCode1ID").value == '999') {
		document.getElementById("labelCode1ID").value = '000';
		document.getElementById("labelName1ID").textContent = 'テスト';
	} else {
		document.getElementById("labelCode1ID").value = '999';
		document.getElementById("labelName1ID").textContent = '変えました';
	}

	return true;
}

修正と言っても、innerTextをtextContentに書き換えるだけです。

一瞬、こっちの方がいいかとも思ったのですが、IE8では動作してくれなかったんで却下しました。
Chromeでは動作したので、textContent自体は使えるようなんですが．．．。

少し調べてみると、innerTextは（Microsoftお得意の）IEの独自仕様で、textContentはW3Cで標準化されたプロパティらしいです（出典を調べきれなかったので、嘘かもしれませんが）。

．．．IE8って標準仕様に従うとか言ってなかったでしたっけねぇ。
流石はMicrosoftです。

後書き

本題とずれるので書かなかったのですが、getElementsByTagNameっていうものも教えて頂きました。

document.getElementsByTagName("LABEL")[0].innerText="変えました"

なんでも、引数で指定したタグ名の要素を配列として取得するメソッドだそうです。
うーむ、javaScriptもいろいろと出来るものなんですね。

前回：javaScriptでラベルの値を変更する方法
投稿記事の一覧：目次

--- blog end ---