IEでjavascriptが動かない！！

IEの開発者ツールで吐き出されるエラー文では何が悪さをしているのか分かりませんでした。

「javascript IE 動かない」とかでｇｇってみると大体以下のような感じでした。

• console.logを使っている
• ブラウザでjavascriptが無効になっている
• 変数が未定義
• jqueryを読み込んでいない
• 全角文字
• スペルミス

...いやいや！そんなのが原因だったらわざわざ見に来ないから！！

仕方がないので頑張って一つずつ原因の切り分けをすることにします。

問題のコード

フォーム内で選択されたラジオボタンの値を取ってこようとしているものです。

textに「艦隊これくしょん」と入力し、金剛を選択してボタンを押すとこのようになります。

innerHTMLで出力されているものを確認します。

textには想定通りに「艦隊これくしょん」が出力されていますがshipはundefinedとなってしまっています。

どうやらラジオボタンで選択されたものを取ってくる部分が悪さしているようです。

その部分を抜粋します。

var ship = document.getElementById("battleship").ship.value;

この一行を書くにあたって参考にしたサイトを再度確認してみました。

lab.syncer.jp

はい、普通にEdgeとIEは非対応って書いてありました。まさかのIEでは使えないものを使ってたから動かなかったというオチです。

恐らく（初歩的なミス以外で）IEでjavascriptが動かないときは大体このパターンだと思います。

というわけでEdge、IEでも動くようにしたものです。

変更部分の抜粋

var elements = document.getElementsByName("ship");
for ( var ship="", i=elements.length; i--; ) {
	if ( elements[i].checked ) {
		var ship = elements[i].value ;
		break;
	}
}

動きとしてはチェックされているラジオボタンを線形探索しているだけです。

ちゃんと値を取得できました。

chromeやfirefoxでは動くのにEdgeやIEでは動かないというのは案外多いようです。

なのでjavascriptで開発するとき、最初にテストするブラウザはIEにしたほうがいいかもしれません。四天王最弱のIEで動けばほかのブラウザではほぼ間違いなく動くはずですし。

私は普段chromeやfirefoxを使うことが多く、開発するときとかにもこの2つを使いがちなので気を付けたいと思います。

ちなみに四天王はchrome、firefox、IE、safariです（私の中では）。