无法使用JQuery获取输入字段的值

Question

我想在输入字段上获取值，并在单击提交按钮时显示用户使用JQuery输入的内容。 问题是，当我单击按钮时，console.log为空白，没有用户文本，这使我发疯，因为我不知道为什么，这是我的html：

 const userLocation = $('#location').val(); $('#submit').on('click', getInfo); function getInfo() { console.log(userLocation) }

 #content { width: 400px; } #request { text-align: center; } .bl { width: 300px; } #current { text-align: center; font-size: 2em; } #upcoming { text-align: center; } .condition { text-align: left; display: inline-block; } .symbol { font-size: 4em; display: inline-block; } .forecast-data { display: block; } .upcoming { display: inline-block; margin: 1.5em; } .label { margin-top: 1em; font-size: 1.5em; background-color: aquamarine; font-weight: 400; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Forecatser</title> </head> <body> <div id="content"> <div id="request"> <input id="location" class='bl' type="text"> <input id="submit" class="bl" type="button" value="Get Weather"> </div> <div id="forecast" style="display:none"> <div id="current"> <div class="label">Current conditions</div> </div> <div id="upcoming"> <div class="label">Three-day forecast</div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="./weather.js"></script> </body> </html>

为什么控制台会打印无值的空白行，我在做什么错？

Answer 1

您只读取输入的初始值，而不是单击它之后。 您应该读取回调中的值，以在单击时获取它的值：

$('#submit').on('click', getInfo);

function getInfo() {
    const userLocation = $('#location').val();
    console.log(userLocation)
}

Answer 2

这是工作示例，代码稍有变化

 $('#submit').on('click', function(){ getInfo(); }); function getInfo() { const userLocation = $('#location').val(); console.log(userLocation) }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Forecatser</title> <style> #content { width: 400px; } #request { text-align: center; } .bl { width: 300px; } #current { text-align: center; font-size: 2em; } #upcoming { text-align: center; } .condition { text-align: left; display: inline-block; } .symbol { font-size: 4em; display: inline-block; } .forecast-data { display: block; } .upcoming { display: inline-block; margin: 1.5em; } .label { margin-top: 1em; font-size: 1.5em; background-color: aquamarine; font-weight: 400; } </style> </head> <body> <div id="content"> <div id="request"> <input id="location" class='bl' type="text"> <input id="submit" class="bl" type="button" value="Get Weather"> </div> <div id="forecast" style="display:none"> <div id="current"> <div class="label">Current conditions</div> </div> <div id="upcoming"> <div class="label">Three-day forecast</div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="./weather.js"></script> </body> </html>

Answer 3

请检查工作演示

https://jsfiddle.net/o2gxgz9r/73662/

$(document).ready(function() {
  $('#submit').on('click', getInfo);

function getInfo() {
    const userLocation = $('#location').val();
    alert(userLocation);
}
});

无法使用JQuery获取输入字段的值

问题描述

3 个解决方案

解决方案1
1 2018-10-07 09:26:01

解决方案2
0 2018-10-07 09:28:06

解决方案3
0 2018-10-07 09:31:01

无法使用JQuery获取输入字段的值

问题描述

3 个解决方案

解决方案1 1 2018-10-07 09:26:01

解决方案2 0 2018-10-07 09:28:06

解决方案3 0 2018-10-07 09:31:01

解决方案1
1 2018-10-07 09:26:01

解决方案2
0 2018-10-07 09:28:06

解决方案3
0 2018-10-07 09:31:01