IE9以下でSCRIPT438エラーするJavaScriptコード、id名と変数名がかぶると駄目?

社内の古(いにしえ)のWebサービスのメンテをしている過程で、InternetExplorer9以下の時、JavaScriptが正常に動いていない状況に出くわした…。未だに根本的な原因が分からず。誰か教えて…。

SCRIPT438: Object doesn't support property or method IE

これがF12の開発者ツールで表示されるエラー。

該当コード

<html>
<body>
<div id="hoge"></div>
<script>
hoge = document.getElementById("hoge"); // エラーにならない
function piyo() {
	hoge = document.getElementById("hoge"); // エラーになる
	var hoge = document.getElementById("hoge"); // エラーにならない
}
piyo();
</script>
</body>
</html>

これをIE9以下で表示させると上記のSCRIPT438エラーになる。

発生条件

  • DOCTYPEなしの互換表示モード(Quirksモード)
  • var 宣言なし
  • 関数内でのみ再現
  • HTMLのid名と変数名が同じ

なぜか、id="hoge" と hoge変数の名前がかぶるとエラーになる。

対処方法

  • DOCTYPEちゃんとする
  • var 宣言ちゃんとする

まぁ、要はちゃんと書いていれば問題が起こらないようなケースなんだけど、古(いにしえ)すぎるWebサイトの場合、なんかよくありがちなケースに思える…。

最新記事

AWSのコストを監視する仕組みを実装したお話

こんにちは、ベーシックのDevOpsエンジニア 奥山です。 普段は主に弊社が運営しているサービス [ferret One](https://ferret-one.com/) の開発・保守の他、インフラ周りの保守運用をやっています。 ...

hirokipf
2018年10月18日

データウェアハウス ClickHouse を使ってみた話。

こんにちは、ベーシックの[DevOpsエンジニア 渡辺](https://www.facebook.com/Nobuo.Watanabe.Y)です。 主にインフラ保守運用や新しい技術の検証、データ解析周りなどをやっています。 ...

taro-sakura
2018年10月11日

vuejsでのSPA開発をより快適にするvuex-orm

こんにちわ[formrun](https://form.run/ja)を開発している [@kkyouhei](https://twitter.com/kkkyouhei) です。 [formrun](https://fo...

kkyouhei
2018年10月01日