我想获取输入字段中的值,并在单击提交按钮时显示用户使用 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>
为什么控制台打印没有值的空行,我做错了什么?
最佳答案
您仅读取输入的初始值,而不是单击后的值。您应该读取回调内部的值,以获取单击时的值:
$('#submit').on('click', getInfo);
function getInfo() {
const userLocation = $('#location').val();
console.log(userLocation)
}
关于javascript - 无法使用JQuery获取输入字段的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52687123/