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()
の外側に置くとうまくいきませんが、内側に置くとうまくいきます。誰もが私になぜ言うことができますか?
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
ハンドラをバインドしています。
このようにグローバル変数を使用しないでください。これがうまくいくとしても、それは悪いプログラミングスタイルです。このようにして、誤って重要なデータを上書きすることがあります。代わりにこれを行ってください。
<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要素 を参照してください。
非推奨 。この属性は、この要素の内容のスクリプト言語を指定します。その値は言語の識別子ですが、これらの識別子は標準的なものではないので、この属性は型のために 廃止予定 になりました。
そして
廃止予定の要素または属性は、新しい構成要素によって古くなっているものです。 […]将来のバージョンのHTMLでは、廃止予定の要素が時代遅れになる可能性があります。 […]この仕様書には、廃止予定の要素の使用を避ける方法を説明する例が含まれています。 […]
<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>
これを使って
編集:
この行に注意してください。
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が(ほとんど)表示された後で処理されるため、ページの読み込み速度も向上する傾向があります。
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>
<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>
あなたのlolは現在ローカル変数なので、変数を宣言するためにvarキーワードを使うのは良い習慣です。
これはあなたのために働くかもしれません:
function kk(){
var lol = document.getElementById('lolz').value;
alert(lol);
}
<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>
上記の解決策はすべて便利です。そして彼らは関数lol = document.getElementById('lolz').value;
の中でfunction kk()
という行を使いました。
私が提案しているのは、あなたは別の関数からその変数を呼ぶかもしれないfun_inside()
function fun_inside()
{
lol = document.getElementById('lolz').value;
}
function kk(){
fun_inside();
alert(lol);
}
複雑なプロジェクトを構築したときに便利です。
document.getElementById( 'id')。value
これがうまくいかないのは、変数がテキストボックスによって変わらないからです。最初にコードを実行すると、テキストボックスの値を取得しますが、その後呼び出されることはありません。ただし、関数内で変数を定義すると、その関数を呼び出すたびに変数が更新されます。それから、テキストボックスの入力に等しい変数に警告します。