JavaScriptの動かないコード　(初級編)　イベントハンドラを動的に追加できない / DOM要素の取得ができない

以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分）

<input type="button" value="「1」と表示" id="my_button">

<script language="JavaScript">

// イベントハンドラを設定
document.getElementsById( "my_button" ).onClick = f;

function f()
{
	alert( "1" );
}

</script>

発生する不具合と原因

スペルミスが２か所あり，IEでもFirefoxでも動かない。

1: onClick　→　onclick

なぜ間違いやすいか？

HTMLの構文中では，大文字・小文字の区別がない。

タグの属性として，「 onClick= 」「OnClick=」など，皆が自分の好きなように，見やすいように記述しているのが現状だろう。それで特に問題はない。

しかし，JavaScriptでは，イベントハンドラにあたるプロパティは小文字である。
イベントハンドラを動的に追加する場合には，onclick, onmouseoverなど全て小文字で書かなければならない。

XMLHttpRequestのonreadystatechangeのように，長いイベント名が出てきたりするとひたすら見づらいし間違えやすいのだが，そこは我慢して，毎回小文字でコーディングする必要がある。*1

なぜIDを通すと単数形なのか？

2: getElementsById()　→ getElementById()

idとはidentificatorないしはidentifierの略で，もともと「同一であることの確認」「本人であることの身元確認」のニュアンスがある。

同一である物が2つあってはいけない。IDも，他と重複してはいけない。重複したらidentifierではなくなる。

だから，Idを使ってgetされるelementは単数でなければならない。

※実際には，同一のIDを持つような要素がHTML中に複数存在した場合，getElementById() は該当する最初の要素を1つ返す。

このスペルミスを誘発する原因として getElementsByTagName() の存在が挙げられるだろう。こちらは複数形。

一応，getElement「s」ById() のような事は，やろうと思えば，jQueryの要素指定方法を使って実現できる。

下記は，IDが特定のパターンにマッチするような全ての要素を取得し，DOM操作を行なう例。

<input type="button" value="表示" onClick="f()">

<p id="my_p1">test</p>
<p id="my_p2">test</p>
<p id="my_p3">test</p>
<p id="hoge">test</p>

<script src="jquery.js"></script>
<script language="JavaScript">

function f()
{
	// jQuery記法で要素を指定
	// IDが "my_p" で始まるような全ての要素
	var elems = $( "[@id^='my_p']" );
	
	for ( i = 0; i < elems.length; i ++ )
	{
		elems[ i ].innerHTML = "変更しました";
	}
	// ↑せっかくjQueryをロードしたなら，
	// 本当はこういう時は each() 文を使うとよい。
}


</script>

また，getElementByID() のように「ID」と大文字にしてしまうケースもある。

よくあること

いずれのスペルミスも頻出のようだ。

急いでいるときに限ってタイピングの手がもつれ，ついこういう間違いを紛れ込ませ，どこがまずいのか気付かないものなので注意。

連載目次へ

*1:Netscape 4 では，イベントハンドラ名は小文字でなくとも通用するらしい。