javascript - JavaScript で入力テキスト値を取得する方法

Question

JavaScriptで入力テキスト値を取得するにはどうすればよいですか?

<script language="javascript" type="text/javascript">
    lol = document.getElementById('lolz').value;
    function kk(){
    alert(lol);
    }
</script>

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" OnClick="kk()"/>
</body>

lol = document.getElementById('lolz').value;上記のように、 function の外に置くと機能kk()しませんが、中に入れると機能します。誰でも理由を教えてもらえますか?

score 73 · Accepted Answer

lolが外部で定義されている場合に関数が機能しない理由は、JavaScript が最初に実行されたときにDOMがまだロードされていないためです。そのため、getElementById戻りますnull( MDN を参照)。

最も明白な解決策はすでに見つかりました。getElementById関数内で呼び出すことにより、関数が呼び出されるまでに DOM が読み込まれて準備が整い、期待どおりに要素が検出されます。

他にもいくつかの解決策があります。1 つは、次のように、ドキュメント全体が読み込まれるまで待機することです。

<script type="text/javascript">
    var lolz;
    function onload() { 
        lolz = document.getElementById('lolz');
    }
    function kk(){
        alert(lolz.value);
    }
</script>

<body onload="onload();">
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" onclick="kk();"/>
</body>

タグのonload属性に注意してください。(補足: タグの属性は非推奨です。使用しないでください。)<body>language<script>

ただし、には問題があります。すべて(画像などを含む) がロードされるonloadまで待機します。

もう 1 つのオプションは、DOM の準備が整うまで待機することです (通常はよりもかなり早い時期ですonload)。これは「プレーンな」JavaScript で実行できますが、jQueryなどの DOM ライブラリを使用する方がはるかに簡単です。

例えば：

<script type="text/javascript">
    $(document).ready(function() {
        var lolz = $('#lolz');
        var kk = $('#kk');
        kk.click(function() {
            alert(lolz.val());
        });
    });
</script>

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" id="kk" />
</body>

jQuery の.ready()は関数を引数として取ります。関数は、DOM の準備が整うとすぐに実行されます。この 2 番目の例では、HTML でインラインで行う代わりに、.click()を使用して kk のハンドラーをバインドしています。onclick

score 15 · Accepted Answer

このようにグローバル変数を使用しないでください。これがうまくいくとしても、それは悪いプログラミングスタイルです。このようにして、重要なデータを誤って上書きしてしまう可能性があります。代わりにこれを行います：

<script type="text/javascript">
   function kk(){
       var lol = document.getElementById('lolz').value;
       alert(lol);
   }
</script>

関数 kk の外側に設定することを主張var lolする場合は、次の解決策を提案します。

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" OnClick="kk()"/>
    <script type="text/javascript">
       var lol = document.getElementById('lolz');
       function kk() {
           alert(lol.value);
       }
    </script>
</body>

script要素は、参照する要素の後に続く必要があることに注意してください。要素は、既に解析および作成されている場合にinputのみクエリ可能であるためです。getElementById

どちらの例も動作し、jsfiddler でテストされています。

編集:language="javascript"廃止されたため、属性を削除しました。W3 HTML4 仕様の SCRIPT 要素を参照してください。

言語= cdata [ CI ]

非推奨。この属性は、この要素のコンテンツのスクリプト言語を指定します。その値は言語の識別子ですが、これらの識別子は標準ではないため、この属性は廃止され、タイプが優先されました。

と

非推奨の要素または属性は、新しい構成によって時代遅れになったものです。[…] 非推奨の要素は、HTML の将来のバージョンで廃止される可能性があります。[…] この仕様には、非推奨の要素の使用を避ける方法を示す例が含まれています。[…]

score 8 · Accepted Answer

<script type="text/javascript">
function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}


</script>

<body onload="onload();">
    <input type="text" name="enter" class="enter" id="lolz" value=""/>
    <input type="button" value="click" onclick="kk();"/>
</body>

これを使って

score 7 · Accepted Answer

次の行に注意してください。

lol = document.getElementById('lolz').value;

マークアップの実際の<input>要素の前にあります:

<input type="text" name="enter" class="enter" value="" id="lolz"/>

コードは行ごとに解析されlol = ...、ブラウザが id の入力の存在を認識する前に行が評価されlolzます。したがって、document.getElementById('lolz')が返さnullれ、document.getElementById('lolz').valueエラーが発生するはずです。

その行を関数内に移動すると、機能するはずです。このようにして、その行は関数が呼び出されたときにのみ実行されます。そしてvar、他の人が提案したように使用して、グローバル変数にしないようにします。

function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}

スクリプトをページの最後に移動することもできます。この種の参照の問題を回避するために、すべてのスクリプトブロックを HTML の末尾に移動することが<body>今日の標準的な方法です。また、読み込みと解析に時間がかかるスクリプトは、HTML が (ほとんど) 表示された後に処理されるため、ページの読み込みが高速化される傾向があります。

score 7 · Accepted Answer

編集：

JavaScript をページの最後に移動して、アクセスする前に DOM (html 要素) が読み込まれるようにします (高速読み込みのために JavaScript を最後にします)。
var textInputVal = document.getElementById('textInputId').value;を使用して、常に例のように変数を宣言します。
入力と要素にはわかりやすい名前を使用してください (自分のコードを理解しやすくし、他の人がそれを見ているときにも理解しやすくなります)。
getElementById の詳細については、http ://www.tizag.com/javascriptT/javascript-getelementbyid.php を参照してください。
jQuery などのライブラリを使用すると、javascript の使用が何百倍も簡単になります。詳細については、http://docs.jquery.com/Tutorials: Getting_Started_with_jQuery

score 4 · Accepted Answer

JavaScript で入力テキスト値を取得する方法

    var textbox;
    function onload() { 
        //Get value.
        textbox = document.getElementById('textbox');
    }

    function showMessage() { 
        //Show message in alert()
        alert("The message is: " + textbox.value);
    }

<body onload="onload();">
<div>
<input type="text" name="enter" class="enter" placeholder="Write something here!" value="It´s a wonderful day!" id="textbox"/>
<input type="button" value="Show this message!" onClick="showMessage()" />
</div>

score 3 · Accepted Answer

上記の解決策はすべて役に立ちます。そして、彼らはラインを使用しました

lol = document.getElementById('lolz').value;

関数内function kk()。

私が提案するのは、別の関数からその変数を呼び出すことができるということですfun_inside()

function fun_inside() {    
    lol = document.getElementById('lolz').value;
}
function kk() {
    fun_inside();
    alert(lol);
}

複雑なプロジェクトを構築する場合に役立ちます。

score 3 · Accepted Answer

あなたの lol は現在ローカル変数であるため、変数を宣言するために var キーワードを使用することをお勧めします。

これはあなたのために働くかもしれません：

function kk(){
  var lol = document.getElementById('lolz').value;
  alert(lol);
}

score 1 · Accepted Answer

1

document.getElementById('id').value

于 2016-05-01T07:14:39.953 に答える

score 0 · Accepted Answer

これが機能しない理由は、変数がテキストボックスで変化しないためです。最初にコードを実行すると、テキストボックスの値が取得されますが、その後は二度と呼び出されません。ただし、関数で変数を定義すると、関数を呼び出すたびに変数が更新されます。次に、テキストボックスの入力と等しい変数に警告します。

javascript - JavaScript で入力テキスト値を取得する方法

12 に答える 12

Related

Reference