JQuery.val（）不起作用

Question

I am trying to simply get the value of an input, and attach it to a 'zipcode' variable. However whenever I try to console the value, it just comes up as blank.

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

I am doing this on codepen.io. I'm not sure if that would have anything to do with it but I thought I might add that. Is there any other way besides .val() to get the value of an element ?

Answer 1

I'm assuming you want to update zipcode everytime the button is clicked. You should move that logic to be inside of your event handler.

$(document).ready(function(){

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

Answer 2

.zipcode-search , doesn't have a value when the page loads, and your variable's value is only assigned once, when the page loads.

If you want to update your variable whenever your button is clicked, you'll need to move your call to $.val , into your click event handler.

Here's an example:

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

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

Note how I assign zipcode a value of null when the page loads, I did this because the chances of .zipcode-search having a value when the page loads, are slim-to-none without more advanced logic.

Edit : Examples provided in other answers, have been redeclaring the zipcode variable every time your button's click event is fired. This is not needed.

Declaring/redeclaring the variable every time the click event is fired, makes that variable exclusive to the scope of your callback function for the click event, which will prevent you from being able to reuse the variable outside of that callback.

Answer 3

You should get the value inside the onClick function:

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