JQuery.val（）不起作用

Question

我试图简单地获取输入的值，并将其附加到“邮政编码”变量。 但是，每当我尝试控制该值时，它就变成空白。

$(document).ready(function(){
  var zipcode = $('.zipcode-search').val()

  $('#button').on('click', function(){
    console.log(zipcode)
  })

的HTML

<div class="col-sm-12">
    <div class="text-center">
        <input class="text-center zipcode-search" type="text" name="zipcode-search" placeholder="Enter your city"/> 
        <button id="button" class="btn btn-success">
          Submit
        </button>

我正在codepen.io上执行此操作。 我不确定这是否与它有关，但我想我可以补充一点。 除了.val（）之外，还有其他方法可以获取元素的值吗？

Answer 1

我假设您想在每次单击按钮时更新zipcode 。 您应该将该逻辑移到事件处理程序中。

$(document).ready(function(){

  $('#button').on('click', function(){
    var zipcode = $('.zipcode-search').val()
    console.log(zipcode)
  })

Answer 2

.zipcode-search ，在页面加载时没有值，并且在页面加载时，变量的值仅分配一次。

如果要在单击按钮时更新变量，则需要将对$.val的调用移至click事件处理程序中。

这是一个例子：

$(document).ready(function() {
    var zipcode = null;

    $('#button').on('click', function() {
        zipcode = $(".zipcode-search").val();
        console.log(zipcode);
    });
});

请注意，我是如何在页面加载时为zipcode分配null的，之所以这样做，是因为在没有页面更高级逻辑的情况下， .zipcode-search在页面加载时具有值的可能性.zipcode-search 。

编辑 ：其他答案中提供的示例在每次触发按钮的click事件时都重新声明了zipcode变量。 这是没有必要的。

每次触发click事件时都要声明/重新声明该变量，从而使该变量不属于click事件的回调函数的作用域，这将使您无法在该回调之外重用该变量。

Answer 3

您应该在onClick函数中获取值：

$(document).ready(function(){
    $('#button').on('click', function(){
       var zipcode = $('.zipcode-search').val()
       console.log(zipcode)
    });
});