ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

Internet Explorerでは動作するJavaScriptを他のブラウザでも動作するように修正しました

Google Chromeでも動作するように修正できました。

f:id:AJYA:20130326215407j:plain

photo credit: nyuhuhuu via photopin cc

 

ことの発端

昨年使われたプログラムを今年用に修正して、動作確認をしていたところ、Google Chromeでは動作しないJavaScriptがありました。

Internet Explorerで動作確認したところ、同じJavaScriptで正常に動作しました。

 

原因の調査

Google Chromeのデバッガを起動して、どこでエラーが発生しているのか確認したところ、

document.forms['sub_form'][0].key1.value

としているところで、valueが無いと表示されました。

プログラムを調べると、

<form action="" method="post" name="sub_form">
    <input type="hidden" name="key1" value="22" >
</form>

というような同じname属性のformが必要な行数分出力されていました。

このため、forms['sub_form'][0]の部分でどのformタグの要素を利用するのか指定して、Internet Explorerでは正常に動作していました。

 

対処方法の調査

既存のコードの延長線上でできないかと、Google Chromeのデバッガ上でいろいろ試してみましたが動作しませんでした。

発想を変えて、hiddenのname属性を指定すればいいのではないかと考えて、

document.getElementsByName('key1')[0].value

としてみたら、Google Chromeで動作するようになりました。

コードを反映してもらって試したところ、Internet Explorerでも動作することが確認できました。

 

今日学んだこと

ブラウザに関わらず同じname属性であれば、formタグで囲むと別扱いにされるように見えるが、別扱いをしないことがわかりました。