の入力フィールドから value プロパティを取得しようとしたときデータを取得するときに、何を入力しても入力値が空であるという予期しないエラーが発生する可能性があります。正しい入力フィールドとボタンをターゲットにできた場合、この謎は複雑に見えるかもしれません。
この問題の根本原因を詳しく調べてみましょう。コード内の inputValue などの JavaScript 変数は、作成時の値のスナップショットを保持します。したがって、最初にスクリプトを実行すると、ページの読み込み時に inputValue 変数に空の文字列が割り当てられます。
残念ながら、その後入力フィールドの値を変更しても、この変数は変更されません。これは、JavaScript 文字列は不変であり、一度割り当てられると変更できないためです。したがって、入力フィールドで行ったキーストロークは、inputValue 変数には反映されません。
この課題を克服するには、2 つのオプションがあります。 :
1.要素を毎回クエリする:
ページの読み込み中に変数に値を割り当てる代わりに、ボタンがクリックされるたびに要素をクエリします:
const testing = () => { const inputValue = document.getElementById("inputField").value; alert(inputValue); };
このアプローチにより、次のことが保証されます。 inputValue 変数には、入力フィールドに入力された最新の値が常に含まれます。
2.要素への参照を使用します:
または、要素への参照を保持し、value プロパティを動的にクエリすることもできます:
const inputElement = document.getElementById("inputField"); const testing = () => alert(inputElement.value);
value プロパティを動的にクエリすることで、静的変数の使用に伴う潜在的な落とし穴を回避し、現在の入力値を確実に操作できるようにします。
以上がフィールドに入力しているにもかかわらず、JavaScript の入力値が常に空になるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。