INASOFT 管理人のひとこと
フリーソフトダウンロードサイト「INASOFT」の管理人 矢吹拓也 が日々の「ひとこと」を語るページです。
2021年1月1日より、旧ブログ(blog.inasoft.org)からお引越ししました。
・INASOFT Webサイト： https://www.inasoft.org/
・管理人のふたこと(長文記事/寄稿文)： https://www.inasoft.org/talk/
2022年7月下旬より再び本業多忙化してきているため、更新頻度は落ちます。 [2022/7/24 19:32]
Tweet
■混乱のJavaScript - IEではフォームの内容を正しく扱えるのにFirefoxやSafariでは正しく扱えないよーなんていう場合
2013年 1月 7日(月) 0:00:00 [さくらのブログから転記]
RSS配信中
こんな感じで準備したタグがあって、
<input type="text" size="10" name="total" value="10" />
<input type="text" size="10" name="tosen" value="6" />
JavaScript内で値を取得しようとする。
total_num = document.getElementById('total').value;
tosen_num = document.getElementById('tosen').value;
Internet Explorerではうまく動くが、FirefoxやSafariではうまく動かない。
どっちの動作が標準に近いのかは知らないが、getElementById は ID の値を元にして要素を探そうとするわけだから、<input>タグの中にid属性の指定がされていないのが悪い。これに気づくのに2時間無駄にした。
<input type="text" size="10" name="total" id="total" value="10" />
<input type="text" size="10" name="tosen" id="tosen" value="6" />
とりあえずこれで値を取得することはできるようになるのだが、total_num や tosen_num の内容を大小比較するなど、数字だか文字だか見分けの付かない方法で使用しようとすると混乱が生じる。
if (total_num < tosen_num)
こんな判定分に食わせようものなら、大混乱が生じる。………場合がある。
っていうか、これもまた Internet Explorerではうまく動くが、FirefoxやSafariではうまく動かない。
やっぱり、Internet Explorer は異端なんだよなぁ…。
原因としては、total_num や tosen_num は「文字列」として取得されているので、大小比較をすると「文字列として、辞書式の大小比較」が行われる事になる。つまり「"10" < "6"」が、判定条件として真になるわけだ。
というわけで、取得する場所を次のようにするのが正解。
total_num = Number(document.getElementById('total').value);
tosen_num = Number(document.getElementById('tosen').value);
これに気づくのに1時間。
合計3時間無駄にしてしまったが、動作環境や型の類推が様々に発生する状況のプログラミングテクニックって、こういうことの積み重ねですね。
目次の表示：
ブログではないので、コメント機能とトラックバック機能は提供していません。ご質問・ご意見等はメール、フィードバックまたはTwitter等からお願いします。いただいたご質問・ご意見などは、この「管理人のひとこと」の記事に追加、あるいは新規の記事にする形で一部または全文をそのまま、あるいは加工させていただいた上で、ご紹介させていただく場合があります。
当サイトでは掲載内容による不具合等に関する責任を持ちません。また、内容の正確性についての保証もありませんので、情報をご利用の際は、利用者の自己責任で確認をお願いします。
－ 最近の更新 －
3213834 (+0572)[+0326]
Copyright© 2010-2024 INASOFT