javascript - Input box value is showing blank on button click

Question

I am trying to pop out input box value but it is showing a blank value. why? Here is the jsfiddle.

$(document).ready(function() {

  var name = $("#name").val();
  $('#showName').click(function() {
    alert(name);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" placeholder="First Name">
   
<button type="button" id="showName">Show name</button>

Answer 1

when you initialize var name in document.ready(), the name variable give a value of input at load of page, so value of name equals to nothing (empty string). so you must change your code that your input value read when button is clicked.

$(document).ready(function() {
    $('#showName').click(function() {
        var name = $("#name").val();
        alert(name);
    });
});