2017-10-06 18 views
-3

私はこの件に関して約20以上の投稿を見ましたが、私には意味をなさないか、わずかに異なります。JSテキスト変数は常に未定義と表示されます

私はこの年齢の私の頭を傷つけている。回答を探すのには相容れないアドバイスがたくさんありますが、私がまだ見たことはありません。 Iveは問題をこの単純な形にまで煮詰めました。ボックスにデータを入力してボタンをクリックすると、警告は常に定義されません。誰かがどうして私は変数を適切に割り当てて、それをアラートに押してテストすることができるのか、どうして説明してくれますか?

ありがとうございます。

コードは次のとおりです。

<html> 
<head> 
    <script src="jquery-3.2.1.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $("button").click(function() { 
       var jsPostcode = document.getElementsByName("pcode").value; 
       alert(jsPostcode); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <form name="login"> 
     <table> 
      <td><input style="width: 80px" name="pcode" type="text" /></td> 
      <td><button>OK</button></td> 
     </table> 
    </form> 
</body> 
</html> 
+2

'getElementsByName'は要素のコレクションを返します。 –

答えて

3

は、あなたが要素を選択するために、属性セレクタ$('[name=pbode]')を使用して、.val()機能

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    var jsPostcode = $("[name=pcode]").val(); 
 
    alert(jsPostcode); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="login"> 
 
    <table> 
 
    <td><input style="width: 80px" name="pcode" type="text" /></td> 
 
    <td><button>OK</button></td> 
 
    </table> 
 
</form>
を使用することによって、それが価値だ得ることができます

1

getElementsByNameは、すべての要素のコレクションを返します。

このコレクションの最初のアイテムにアクセスする必要があります。

これを行うには、document.getElementsByName("pcode")[0].valueに回線を更新します。

これは、jsで配列の最初の項目にアクセスするのと同じ方法です。

コードを次のように更新する必要があります。あなたはjQueryのを使用しているので

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    var jsPostcode = document.getElementsByName("pcode")[0].value; 
 
    alert(jsPostcode); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="login"> 
 
    <table> 
 
    <td> 
 
     <input style="width: 80px" name="pcode" type="text" /> 
 
    </td> 
 
    <td> 
 
     <button>OK</button> 
 
    </td> 
 
    </table> 
 
</form>

2

document.getElementsByNameは配列を返します。だから、

var jsPostcode = document.getElementsByName("pcode")[0].value;

1

参照してくださいドキュメントには、このライン、

var jsPostcode = document.getElementsByName("pcode").value;

を更新 - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

要素= document.getElementsByName(名前)
要素がありますライブNodeListコレクション 名前は、要素の名前属性の値です。 はしたがって、我々は、アレイgetElementsByName( "PCODE")の最初の項目にアクセスしている[0]

$(document).ready(function() { 
 
     $("button").click(function(){ 
 

 

 
var jsPostcode = document.getElementsByName("pcode")[0].value; 
 

 
alert (jsPostcode); 
 

 
}); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html><head> 
 
</head> 
 

 
<body> 
 
       <form name="login"> 
 
         <table> 
 
           <td><input style="width: 80px" name="pcode" type="text" /></td> 
 
           <td><button>OK</button></td> 
 
         </table> 
 
       </form> 
 
</body> 
 
</html>

1

またはdocumentGetElementById();を使用して、より良いキャッチのためにそれらにIDを与えます。

関連する問題