无法使用JQuery获取输入字段的值
[英]Can't get value of input field using JQuery
问题描述
I want to take the value on an input field and display what the user has entered using JQuery on clicking a submit button. 
我想在输入字段上获取值，并在单击提交按钮时显示用户使用JQuery输入的内容。 The problem is that when I click the button the console.log is blank without the user text and this is driving me crazy because I can't figure out why, here is my html: 问题是，当我单击按钮时，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>
Why does the console print blank lines with no value, what am I doing wrong? 为什么控制台会打印无值的空白行，我在做什么错？
3 个解决方案
解决方案1
1 2018-10-07 09:26:01
You're reading only the initial value of the input, not after it has been clicked. 您只读取输入的初始值，而不是单击它之后。 You should read the value inside of your callback, to get it's value at the time of clicking: 您应该读取回调中的值，以在单击时获取它的值：
$('#submit').on('click', getInfo);
function getInfo() {
const userLocation = $('#location').val();
console.log(userLocation)
}
解决方案2
0 2018-10-07 09:28:06
Here is working sample with small change of your code 这是工作示例，代码稍有变化
$('#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>
解决方案3
0 2018-10-07 09:31:01
Please check the working demo 请检查工作演示
https://jsfiddle.net/o2gxgz9r/73662/ https://jsfiddle.net/o2gxgz9r/73662/
$(document).ready(function() {
$('#submit').on('click', getInfo);
function getInfo() {
const userLocation = $('#location').val();
alert(userLocation);
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.