【Javascript】HTML中のイベント属性にスクリプトを書くときの注意

Tweet

Category JavaScript 2011/12/08

問題

あれ？これ動かないかな？

document.getElementById is not a function って言われた。

<form action="">
<input type="hidden" id="A" name="document" value="123456">
<input type="button" value="alert" onclick="alert(document.getElementById('A').value)">
</form>

答え

イベント属性にスクリプトを書くと、スコープチェーンにformやdocumentが含まれるため、input要素などによくない名前をつけると、想定外の動作をすることがある。

問題の例では、documentという名前のinput要素があるため、onclick内で使われているdocumentは、グローバルなdocument（window.document）ではなく、this.form.document を指している。

this.form.documentはinput要素であり、getElementByIdというメソッドを持っていない。

結果はエラー。

他のよくない名前の例

・window.tagName で INPUT が返ってくる。

<form action="">
<input type="button" name="window" onclick="self.alert(window.tagName)" value="self.alert(window.tagName)">
</form>

・alert()ができない。alertがname=’alert’の要素のことになってしまう。

<img name='alert' alt="Alert!" src="alert.jpg">
<button onclick="alert('test')">alert('test');</button>

参考

Unsafe Names for HTML Form Controls

【Javascript】input要素のonclickに書いたスクリプトについて