web-dev-qa-db-ja.com

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

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;を関数kk()の外側に置くとうまくいきませんが、内側に置くとうまくいきます。誰もが私になぜ言うことができますか？

javascripttextinputget
57
Maria

lolがその外側で定義されている場合、あなたが機能しないのは、JavaScriptが最初に実行されるときに DOM がまだロードされていないためです。そのため、getElementByIdはnullを返します（ MDNを参照 ）。

最も明白な解決策を既に見つけました：関数の中でgetElementByIdを呼び出すことによって、DOMはロードされて関数が呼び出される時までに準備ができていて、あなたが期待するように要素が見つけられるでしょう。

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

<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>

<body>タグのonload属性に注意してください。 （注：<script>タグのlanguage属性は推奨されていません。使用しないでください。）

しかし、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ハンドラをバインドしています。

66
PPvG

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

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

var lolを関数kkの外側に設定するように主張するなら、私はこの解決策を提案します：

<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では、廃止予定の要素が時代遅れになる可能性があります。 […]この仕様書には、廃止予定の要素の使用を避ける方法を説明する例が含まれています。 […]

13
nalply
<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>

これを使って

6
DOCTYPE HTML

編集：

  1. アクセスする前にDOM（html要素）がロードされていることを確認するために、JavaScriptをページの末尾に移動してください（高速ロードのために終了するにはJavaScript）。
  2. var textInputVal = document.getElementById（ 'textInputId'）。value;を使用して、常に例のように変数を宣言します。
  3. 入力と要素にはわかりやすい名前を使用してください（自分のコードを理解しやすくしたり、他の人が見ているときにわかりやすくなります）。
  4. GetElementByIdの詳細については、次を参照してください。 http://www.tizag.com/javascriptT/javascript-getelementbyid.php
  5. JQueryなどのライブラリを使用すると、javascriptをより簡単に使用できるようになります。 http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
6
Mauno Vähä

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

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

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

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

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

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

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

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

6
bfavaretto

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>
3
Elenasys
<script>
function subadd(){
subadd= parseFloat(document.forms[0][0].value) + parseFloat(document.forms[0][1].value) 
window.alert(subadd)  
}
</script>

<body>
<form>
<input type="text" >+
<input type="text" >
<input type="button" value="add" onclick="subadd()">
</form>
</body>
2
Scott

あなたのlolは現在ローカル変数なので、変数を宣言するためにvarキーワードを使うのは良い習慣です。

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

function kk(){
  var lol = document.getElementById('lolz').value;
  alert(lol);
}
2
Shreedhar
<input type="password"id="har">
<input type="submit"value="get password"onclick="har()">
<script>
    function har() {
        var txt_val;
        txt_val = document.getElementById("har").value;
        alert(txt_val);
    }
</script>
2
harsh mangalam

上記の解決策はすべて便利です。そして彼らは関数lol = document.getElementById('lolz').value;の中でfunction kk()という行を使いました。

私が提案しているのは、あなたは別の関数からその変数を呼ぶかもしれないfun_inside()

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

複雑なプロジェクトを構築したときに便利です。

2
htoniv

document.getElementById（ 'id'）。value

1
Selva Raj

これがうまくいかないのは、変数がテキストボックスによって変わらないからです。最初にコードを実行すると、テキストボックスの値を取得しますが、その後呼び出されることはありません。ただし、関数内で変数を定義すると、その関数を呼び出すたびに変数が更新されます。それから、テキストボックスの入力に等しい変数に警告します。

0
user6797340