使用用戶輸入更改Javascript變量的值

Question

我目前正在使用天氣站點。我想將用戶輸入變爲改變當前城市的變量。希望你的某個人能幫助我。打提交按鈕後

var userInput = "London"; 
 

 
function changeValue() { 
 
    userInput = document.getElementById("user_Input").value; 
 
    document.getElementById("location").innerHTML = document.getElementById("user_Input").value; 
 
} 
 

 
window.onload = function() { 
 

 
var api = "http://api.openweathermap.org/data/2.5/forecast/daily?q="; 
 
var units = "&units=metric"; 
 
var url2 = api + userInput + units + APPID; 
 

 
var xmlhttp = new XMLHttpRequest(); 
 
xmlhttp.onreadystatechange = function() { 
 
    if(this.readyState == 4 && this.status == 200) { 
 
     myObj = JSON.parse(this.responseText); 
 
     
 
     var iconCode = myObj.list[0].weather[0].id; 
 
     var directions = myObj.list[0].deg; 
 

 
     for (var i = 0; i < 7; i++) { 
 
      
 
      document.getElementById("day" + i).innerHTML = Math.round(myObj.list[i].temp.day) + "°"; 
 
      document.getElementById("icon" + i).src = "sl_line/" + iconCode + ".svg"; 
 
      document.getElementById("wota" + i).innerHTML = wochentag[day.getDay()+i+1]; 
 
      document.getElementById("humidity").innerHTML = Math.round(myObj.list[0].humidity); 
 
      document.getElementById("wind").innerHTML = myObj.list[0].speed + " m/s"; 
 
      document.getElementById("direction").innerHTML = directions; 
 
     } 
 
    } 
 
}; 
 

 
xmlhttp.open("GET", url2, true); 
 
xmlhttp.send(); 
 
};

<article> 
 
    <input id="user_Input" type="text" placeholder="Ortsuchen..."> 
 
    <button id="submit" onclick="changeValue()">Submit</button> 
 
    <span id="location">Unknown</span> 
 
</article> 
 
<section> 
 
     <div> 
 
      <div><span id="day0" class="ml:.25r fs:6r">0</span></div> 
 
      <div><span id="wochentage">0</span></div> 
 
     </div> 
 
     <div> 
 
      <img id="icon0"> 
 
     </div> 
 
     <div> 
 
      <span id="wind">0</span><span id="direction"></span><span></span> 
 
     </div> 
 
     <div> 
 
      <span id="humidity">0</span><span>%</span> 
 
     </div> 
 
</section>

位置得到更新。但變量的值不會改變。我已經瀏覽了stackoverflow和其他網站，但沒有找到任何適合我的解決方案。

Answer 1

1st：您的請求將只能在page load上運行。您需要在用戶更改userInput .so之後再次運行該功能，並將其作爲一項功能並在每次userInput更改時調用它。

var userInput = "London"; 
 

 
function changeValue() { 
 
    userInput = document.getElementById("user_Input").value; 
 
    document.getElementById("location").innerHTML = document.getElementById("user_Input").value; 
 
    
 
    ajax_call(); 
 
} 
 

 
function ajax_call(){ 
 

 
var api = "http://api.openweathermap.org/data/2.5/forecast/daily?q="; 
 
var units = "&units=metric"; 
 
var url2 = api + userInput + units + APPID; 
 

 
var xmlhttp = new XMLHttpRequest(); 
 
xmlhttp.onreadystatechange = function() { 
 
    if(this.readyState == 4 && this.status == 200) { 
 
     myObj = JSON.parse(this.responseText); 
 
     
 
     var iconCode = myObj.list[0].weather[0].id; 
 
     var directions = myObj.list[0].deg; 
 

 
     for (var i = 0; i < 7; i++) { 
 
      
 
      document.getElementById("day" + i).innerHTML = Math.round(myObj.list[i].temp.day) + "°"; 
 
      document.getElementById("icon" + i).src = "sl_line/" + iconCode + ".svg"; 
 
      document.getElementById("wota" + i).innerHTML = wochentag[day.getDay()+i+1]; 
 
      document.getElementById("humidity").innerHTML = Math.round(myObj.list[0].humidity); 
 
      document.getElementById("wind").innerHTML = myObj.list[0].speed + " m/s"; 
 
      document.getElementById("direction").innerHTML = directions; 
 
     } 
 
    } 
 
}; 
 

 
xmlhttp.open("GET", url2, true); 
 
xmlhttp.send(); 
 

 
} 
 

 
window.onload = function() { 
 

 
    ajax_call(); 
 
};

<article> 
 
    <input id="user_Input" type="text" placeholder="Ortsuchen..."> 
 
    <button id="submit" onclick="changeValue()">Submit</button> 
 
    <span id="location">Unknown</span> 
 
</article> 
 
<section> 
 
     <div> 
 
      <div><span id="day0" class="ml:.25r fs:6r">0</span></div> 
 
      <div><span id="wochentage">0</span></div> 
 
     </div> 
 
     <div> 
 
      <img id="icon0"> 
 
     </div> 
 
     <div> 
 
      <span id="wind">0</span><span id="direction"></span><span></span> 
 
     </div> 
 
     <div> 
 
      <span id="humidity">0</span><span>%</span> 
 
     </div> 
 
</section>