Question

我正在尝试弹出输入框值，但它显示的是空白值。为什么？这是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

在var name中初始化document.ready()时，name变量在页面加载时给出输入值，因此name的值等于空（空字符串）。因此，您必须更改单击按钮时输入值读取的代码。

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

Answer 2

移动var name = $("#name").val();功能内的click。

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

以下示例

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

按钮单击时输入框值显示为空白

3 个答案: