为什么我的按钮找不到这个输入文本字段的输入值？

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

你实际上有两个日志，第一个日志应该记录输入值，但第二个日志将有一个空字符串，因为让y= $("#lfdcontainerfield").val();代码从不调用，并且y没有值。将它包含在click事件范围内，它将在按钮单击时执行。