Question

我正在创建一个简单的练习天气页面，您可以在其中获取特定城市的天气数据。

目前，当我进入城市时，它会通过创建ul / li元素来显示数据，但是当我进入第二个城市而不是替换和更新现有元素时，它只会添加第一个城市下第二个城市的数据。

window.onload = function() {
  let cityName = document.querySelector("#city");
  let button = document.querySelector("#submit");
  // Checks value type and displays property and value.
  let logLi = function(k, j) {
    if (typeof j === 'object') {
      isObject(j);
    } else {
      let li = document.createElement('LI');
      let liText = document.createTextNode('\u00A0\u00A0\u00A0\u00A0' + k + ": " + j);
      li.appendChild(liText)
      document.querySelector('body').appendChild(li);
    }
  }
  // Checks Object's name type, and displays name of object or Array
  let logUl = function(x) {
    if (isNaN(x)) {
      let output = document.createElement('UL');
      let outputText = document.createTextNode(x);
      output.appendChild(outputText);
      document.querySelector('body').appendChild(output);
    }
  }

  // Calls logLi on every value in object
  let isObject = function(x) {
    for (let i in x) {
      logLi(i, x[i]);
    }
  };

  //Updates Query url when user submits their city
  let city = function() {
    let api = "http://api.openweathermap.org/data/2.5/weather?q=";
    let units = "&units=metric&APPID=xxxxxxx"
    let url;
    url = api + cityName.value + units;

    //Breaks down the JSON
    $(document).ready(function() {
      $.getJSON(url, function(data) {
        let sort = function(x) {
          for (let k in x) {
            if (typeof x[k] == 'number' || typeof x[k] == 'string') {
              logLi(k, x[k]);
            } else if (Array.isArray(x[k])) {
              logUl(k);
              sort(x[k]);
            } else if (typeof x[k] == 'object') {
              logUl(k);
              isObject(x[k]);
            }
          }
        }
        sort(data);

      });
    });
  }
  //Submition
  button.onclick = city;
  cityName.addEventListener('keypress', function(e) {
    if (e.keyCode == 13) {
      city();
    }
  });

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="city" value="London"></input>
  <button type="button" return false id="submit">submit</button>
</form>

Answer 1

您的代码有点难读，但我“破解了”。我让它像这样工作：

1）我添加了一个ID为“weather”的新div

<form>
<input id="city" value="London"></input>
<button type="button" return false id="submit">submit</button>
</form>
<div id="weather"></div>

2）在js脚本中添加一个新变量

之后在let weather = document.getElementById('weather');函数

内开始的

window.onload

3）代码更改document.querySelector('body')与weather

的更改

4）最后在city函数内部开始添加weather.innerHTML = '';这将清除天气的html，就像没有任何东西一样。

以下是示例，只需运行代码段：

window.onload = function() {
  let cityName = document.querySelector("#city");
  let button = document.querySelector("#submit");
  let weather = document.getElementById('weather');
  // Checks value type and displays property and value.
  let logLi = function(k, j) {
    if (typeof j === 'object') {
      isObject(j);
    } else {
      let li = document.createElement('LI');
      let liText = document.createTextNode('\u00A0\u00A0\u00A0\u00A0' + k + ": " + j);
      li.appendChild(liText)
      weather.appendChild(li);
    }
  }
  // Checks Object's name type, and displays name of object or Array
  let logUl = function(x) {
    if (isNaN(x)) {
      let output = document.createElement('UL');
      let outputText = document.createTextNode(x);
      output.appendChild(outputText);
      weather.appendChild(output);
    }
  }

  // Calls logLi on every value in object
  let isObject = function(x) {
    for (let i in x) {
      logLi(i, x[i]);
    }
  };

  //Updates Query url when user submits their city
  let city = function() {
    weather.innerHTML = '';
    let api = "https://api.openweathermap.org/data/2.5/weather?q=";
    let units = "&units=metric&APPID=XXXXXXXXXXXXXX"
    let url;
    url = api + cityName.value + units;

    //Breaks down the JSON
    $(document).ready(function() {
      $.getJSON(url, function(data) {
        let sort = function(x) {
          for (let k in x) {
            if (typeof x[k] == 'number' || typeof x[k] == 'string') {
              logLi(k, x[k]);
            } else if (Array.isArray(x[k])) {
              logUl(k);
              sort(x[k]);
            } else if (typeof x[k] == 'object') {
              logUl(k);
              isObject(x[k]);
            }
          }
        }
        sort(data);

      });
    });
  }
  //Submition
  button.onclick = city;
  cityName.addEventListener('keypress', function(e) {
    if (e.keyCode == 13) {
      city();
    }
  });

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="city" value="London"></input>
  <button type="button" return false id="submit">submit</button>
</form>
<div id="weather"></div>

如何更新正文内容而不是添加到现有内容？

1 个答案: