無法使用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