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注释掉，以便运行。它未定义，因为我没有实现它。

＆＃13;

$(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);
        //});
    })
});

＆＃13;

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

＆＃13;

只是为了好玩，如果你有一个页面加载的val，那就是它的样子。

＆＃13;

    $(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);
            //});
        })
    });

＆＃13;

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

＆＃13;

Answer 2

你实际上有2个日志，第一个应记录输入值，但第二个将有一个空字符串，因为让y = $（“＃lfdcontainerfield”）。val（）; 代码从不调用，y没有值。将其包含在click事件范围中，它将在按钮单击时执行。

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

2 个答案: