javascript - Input box value is showing blank on button click -

i trying pop out input box value showing blank value. why? here 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>

when initialize var name in document.ready(), name variable give value of input @ load of page, value of name equals nothing (empty string). must change code input value read when button clicked.

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