ボタンがこの入力テキストフィールドの入力値を見つけられないのはなぜですか？

Question

ボタンをクリックしてconsole.logに入力テキストフィールドの値を入力すると、空白が表示されます。何故ですか？私のコードは...正しいよう

<div class="btn btn-default btn-xs col-md-2"> 
    <input class="form-control input-sm col-md-2 " type="text" name="lfdcontainerfield" placeholder="Container #" id="lfdcontainerfield">  <br> 
    <!-- 
    <input class="form-control input-sm col-md-2 " type="text" placeholder="File #" id="lfdfilenumber">  <br> 
    <input class="form-control input-sm col-md-2 " type="text" placeholder="Terminal Code" id="lfdterminal">  <br> 
    --> 
    <button type="button" class="btn btn-success btn-sm col-md-12" id='lfdsubmit'><strong>Submit</strong></button> <br> 
</div> 

のjavascript：

$(function() { 

    let y = $("#lfdcontainerfield").val(); 
    $("#lfdsubmit").click(() => { 
     //e.preventDefault(); 

     let lfd_container = $("#lfdcontainerfield").val(); 
     //let lfd_filenumber = $("#lfdfilenumber"); //reserved 
     //let lfd_terminal = $("#lfdterminal"); //reserved 

     console.log(lfd_container); 
     console.log(y); 


     LFD_SearchContainer(lfd_container) 
     .then(container => { 
      //console.log("This is .then : " + container); 
     }) 
     .catch(error => { 
      //console.log(error); 
     }); 
    }) 
}); 

Answer 1

あなたはそのの値の入力をポーリングしているため、ボタンがある後は、lfd_containerが適切な値を返していることを、この場合には見ることができますクリックした しかし、変数yは、ページが読み込まれるときに値が入力される前に設定されています。これは空の文字列なので、これを見ることができます。クリックイベント後に入力から更新された値を取得している間は、空の値が保持されます。

このコードでは、機能が実行されるようにあなたの関数LFD_SearchContainerをコメントアウトしました。実装されていないため定義されていません。

$(function() { 
 

 
    let y = $("#lfdcontainerfield").val(); 
 
    $("#lfdsubmit").click(() => { 
 
     //e.preventDefault(); 
 

 
     let lfd_container = $("#lfdcontainerfield").val(); 
 
     //let lfd_filenumber = $("#lfdfilenumber"); //reserved 
 
     //let lfd_terminal = $("#lfdterminal"); //reserved 
 

 
     console.log(lfd_container); 
 
     console.log(y); 
 
     console.log(typeof y); 
 

 
     //LFD_SearchContainer(lfd_container) 
 
     //.then(container => { 
 
      //console.log("This is .then : " + container); 
 
     //}) 
 
     //.catch(error => { 
 
      //console.log(error); 
 
     //}); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn btn-default btn-xs col-md-2"> 
 
    <input class="form-control input-sm col-md-2 " type="text" name="lfdcontainerfield" placeholder="Container #" id="lfdcontainerfield">  <br> 
 
    <!-- 
 
    <input class="form-control input-sm col-md-2 " type="text" placeholder="File #" id="lfdfilenumber">  <br> 
 
    <input class="form-control input-sm col-md-2 " type="text" placeholder="Terminal Code" id="lfdterminal">  <br> 
 
    --> 
 
    <button type="button" class="btn btn-success btn-sm col-md-12" id='lfdsubmit'><strong>Submit</strong></button> <br> 
 
</div>

は楽しみのためだけにこれは、ページのロードでのvalを持っていた場合、それはどのようなものかです。

$(function() { 
 
     let rand = Math.round(Math.random() * 10); 
 
     $("#lfdcontainerfield").val(rand); 
 
     let y = $("#lfdcontainerfield").val(); 
 
     $("#lfdsubmit").click(() => { 
 
      //e.preventDefault(); 
 

 
      let lfd_container = $("#lfdcontainerfield").val(); 
 
      //let lfd_filenumber = $("#lfdfilenumber"); //reserved 
 
      //let lfd_terminal = $("#lfdterminal"); //reserved 
 

 
      console.log('The value of lfd_container: ' + lfd_container); 
 
      console.log('The value of y: ' + y); 
 

 
      //LFD_SearchContainer(lfd_container) 
 
      //.then(container => { 
 
       //console.log("This is .then : " + container); 
 
      //}) 
 
      //.catch(error => { 
 
       //console.log(error); 
 
      //}); 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="btn btn-default btn-xs col-md-2"> 
 
     <input class="form-control input-sm col-md-2 " type="text" name="lfdcontainerfield" placeholder="Container #" id="lfdcontainerfield">  <br> 
 
     <!-- 
 
     <input class="form-control input-sm col-md-2 " type="text" placeholder="File #" id="lfdfilenumber">  <br> 
 
     <input class="form-control input-sm col-md-2 " type="text" placeholder="Terminal Code" id="lfdterminal">  <br> 
 
     --> 
 
     <button type="button" class="btn btn-success btn-sm col-md-12" id='lfdsubmit'><strong>Submit</strong></button> <br> 
 
    </div>

Answer 2

あなたは実際に2つのログを持って、最初の1は、入力値を記録する必要がありますが、はyは$（ "＃のlfdcontainerfieldを"）=ましょうので、もう一つは空の文字列を持っています。 val（）;コードは決して呼び出されず、yには値がありません。 これをクリックイベントスコープに含めて、ボタンクリック時に実行します。