JQuery.val( ) not working

JQuery.val( ) not working

本文关键字：not working val JQuery      更新时间：2023-09-26

我试图简单地获取输入的值，并将其附加到"zipcode"变量。然而，每当我试图控制该值时，它都会显示为空白。

$(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（），还有其他方法可以获得元素的值吗？

.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变量。这是不需要的。

每次触发click事件时声明/重新声明变量，会使该变量成为click事件回调函数的专属范围，这将使您无法在回调之外重用该变量。

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

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

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

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