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

标签 javascript jquery

我想获取输入字段中的值,并在单击提交按钮时显示用户使用 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/

相关文章:

javascript - 动态改变放置元素的高度和宽度

javascript - 对 div 组进行排序

javascript - 使用 jQuery 删除表但不删除表单和字段

javascript - 如何通过ajax发送数据并且url在链接中间有一个变量值

javascript - 防止 flex 元素中的文本区域和镜像内容随内容动态扩展

javascript - 如何将动态添加的输入字段关联到父元素/id?

javascript - 我们如何使用canvas获取html5中的视频截图

javascript - Node.js:无法从 array.map() 返回新数组

javascript - Jquery 单击处理程序不在表中工作

php - jQuery Datepicker 在动态元素中不起作用