代码之家  ›  专栏  ›  技术社区  ›  DeputyDong_

使用用户输入更改Javascript变量的值

  •  0
  • DeputyDong_  · 技术社区  · 9 年前

    我目前在一个气象网站上工作。我想让用户输入一个变量,改变当前城市。希望你们中有人能帮助我。

    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>

    1 回复  |  直到 9 年前
        1
  •  1
  •   JYoThI    9 年前

    第一: 您的请求将仅在 page load 。在用户更改 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>