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 个答案: