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

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

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

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

コードを実行してデモ ページを開き、ログイン ボタンをクリックして、どのような変更が行われるかを確認します。 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 テーブルで数千万のデータを処理するアイデアを共有する

推薦する

MySQL マスタースレーブレプリケーションプロセスの詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...

MySQLのスペースをクリーンアップするいくつかの具体的な方法

目次序文1. ファイルのディスク使用量を確認する1.1 ディスク容量の使用状況を確認する1.2 ディ...

Tomcat が非同期サーブレットを実装する方法の詳細な説明

序文これまでの Tomcat シリーズの記事を通じて、私のブログを読んでいる学生は Tomcat に...

ウェブデザインにおけるキーワード設計手法の紹介

多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...

MySQL 日付処理関数の例の分析

この記事は主にMySQLの日付処理関数のサンプル分析を紹介します。この記事ではサンプルコードを詳細に...

Docker+K8S+GitLab/SVN+Jenkins+Harbor をベースにした継続的インテグレーション配信環境の構築に関する詳細なチュートリアル

目次環境設定の概要1.K8Sとは何ですか? 2. K8S を使用する理由3. K8S を使用する利点...

Docker で Rancher をデプロイする方法 (落とし穴なし)

操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...

react-diagram シリアル化 Json 解釈 ケース分析

このドキュメントの目的はreact-diagramフレームワーク モデルの Json シリアル化を説...

ウェブページのテキストデザインは、服を着た賢い女の子のようであるべきだ

<br />「この世に醜い女性はいない、あるのは怠惰な女性だけだ」これは女性の美のバイブ...

JavaScript はクリックして画像の形状を変更する (変換アプリケーション) を実装します。

JavaScriptをクリックすると画像の形状が変わります(変形の応用)。参考までに具体的な内容は...

JS ES 新機能テンプレート文字列

目次1. テンプレート文字列とは何ですか? 2. 複数行のテンプレート文字列2.1 式付きテンプレー...

HTMLでは、全体的なスタイルとレイアウトを崩さずに、部分的に強制スクロールバーを使用できます。

まずはエフェクト画像を投稿します:全体的なスタイルとレイアウトが崩れないように、スクロール バーがロ...

ウェブタイポグラフィにおける致命的な意味的ミス 10 選

<br />これは、Steven D が書いた Web フロントエンド開発デザインの基本...

Vue はチャット ボックスで絵文字を送信する機能を実装します

vueチャットボックスで絵文字を送信し、vueインターフェースで絵文字を送信するための具体的なコード...

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...