ラベルタグの使用時に発生する問題の分析と解決策

最近何かをするときにラベルタグを使用しました。以前はラベルタグをほとんど使用していなかったため、非常に奇妙な問題が発生しました。何が問題なの？効果を見てみましょう

ヒント: 実行前にコードの一部を変更することができます

このデモの目的は、ログインボタンをクリックしたときにユーザーが入力したユーザー名とパスワードが有効かどうかを確認することです。有効でない場合は、ユーザー名入力ボックスの下にエラーメッセージが表示されます。
エラー情報を促す要素はラベルを使用して実装される予定です。

コードを実行してデモページを開き、ログインボタンをクリックして、どのような変更が行われるかを確認します。 Firefox、Chrome、または IE9+ を使用している場合、ログインボタンをクリックすると、「ユーザー名が間違っています」というメッセージが表示されますが、これは望ましい結果です。 IE6、7、8をお使いの方は、どのような変更が行われるか確認してみてはいかがでしょうか。この時点では、ページには何も情報が表示されません。開発者ツールを開いてコントロールを確認します。この時点で、「SCRIPT600: 不明なランタイムエラー」というエラーメッセージが表示されていることがわかります。この問題に遭遇したとき、innerText と innerHTML の両方の方法を試したところ、どちらの方法でも同じエラーが報告されました。使い方が間違っていると思ったので、w3cschool で確認したところ、innerText と innerHTML はサポートされていないとは書かれていませんでした。

Firefox、Chrome、IE9+ (他のブラウザは試していません) では正常に動作するのに対し、IE6、7、8 ではこのエラーが表示されるのはなぜですか?注意深い人ならすぐに問題に気付くかもしれません。「ユーザー名が間違っています」というメッセージが表示される要素の開始タグが、label ではなく「lable」と書かれています。しかし、当時はこの問題に気付きませんでした。label タグの使用方法に問題があるとばかり思っていました。IE6、7、8 の JS エンジンでは、タグ名が間違っている要素の innerText 属性と innerHTMl 属性を操作するとエラーが発生するのに、Firefox、Chrome、IE9+ ではエラーが発生しないのはなぜか、よくわかりません。詳しい方がいらっしゃいましたら、教えてください。

この問題は実際にはかなり低レベルで、ラベル名が間違って記述されていました。しかし、当時は気付きませんでした。後になってよく調べてみてこの問題に気づいたので、記録しておきました。

<<: Vueフロントエンドパッケージングの詳細なプロセス

>>: 単一の MySQL テーブルで数千万のデータを処理するアイデアを共有する