Warum findet meine Taste den Eingabewert dieses Eingabetextfeldes nicht?

Question

Wenn ich auf meine Schaltfläche und console.log den Wert des Eingabetextfeldes klicke, wird es leer angezeigt. Warum das? Mein Code sieht richtig ...

<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

Sie können in diesem Fall sehen, dass lfd_container den richtigen Wert zurückkehrt, weil Sie Abfrage der Eingang für seinen Wert sind nach der Knopf geklickt. Die Variable y wird jedoch gesetzt, bevor ein Wert eingegeben wird, wenn die Seite geladen wird. Sie können dies sehen, weil es eine leere Zeichenfolge ist. Es behält diesen leeren Wert bei, während Sie den aktualisierten Wert aus der Eingabe nach dem Klickereignis abrufen.

Für diesen Code habe ich Ihre Funktion LFD_SearchContainer auskommentiert, damit die Dinge laufen. Es ist undefiniert, weil ich seine Implementierung nicht habe.

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

Just for fun ist es das, was es ist, wenn Sie eine val beim Laden der Seite haben.

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

Sie haben tatsächlich zwei Protokolle, sollte der erste, der den Eingangswert einzuloggen, aber die zweite wird eine leere Zeichenkette, weil lassen y $ („# lfdcontainerfield“) =. val(); Code ruft nie und y hat keinen Wert. Fügen Sie sie in den Click-Ereignisbereich ein, und sie wird beim Klicken auf die Schaltfläche ausgeführt.