Google Chromeでも動作するように修正できました。
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タグで囲むと別扱いにされるように見えるが、別扱いをしないことがわかりました。
