【Javascript】recalcっていう名前の関数がonclickで使えない

Tweet

Category JavaScript 2011/12/05

問題

onclick属性にrecalc()って書いたら、IEで動かないんだけど、なんで？

<script>
	function recalc() {
		alert("再計算して！");
	}
</script>

<input type="button" value="再計算" onclick="recalc();" />

Firefoxとかなら動くのに。

答え

input要素のonclickに書いたスクリプトのスコープチェーンはちょっと特殊なのと、IEにはdocument.recalcという関数が存在するのが原因。

onclickに書くと、
その要素.recalc
→ そのフォーム.recalc
→ document.recalc
→ window.recalc（グローバルなrecalc()）
の順で探しにいく。

通常は、グローバルなrecalc関数を定義しておけば、window.recalcが呼ばれるが、IEはwindow.recalcの前にdocument.recalcが存在するため、document.recalcが呼ばれてしまう。

IEではdocument.recalcが呼ばれるので、エラーにもならないし、見た感じ何もおきていないように見える。

参考

・document.recalc()

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