JS功能显示出搜索的结果，但是搜索其他内容时会消失

Question

婴儿开发人员在这里。因此，我正在使用Axios和Open Weather API创建一个天气应用程序，以获取实时预测信息。我在HTML中创建了一个空的DIV，然后创建了一个功能，该功能只有在搜索的城市具有有效的天气警报时，才能在页面底部显示警报。它效果很好，我唯一的问题是，一旦我搜索一个具有主动警报的城市，警报就一直留在那儿，除非我刷新页面，否则不会消失。
因此，例如，如果我搜索巴黎和巴黎有一个主动警报，则会出现，但是如果我搜索罗马和罗马没有主动警报，那么巴黎警报就一直留在那里，直到我刷新页面，

这是我的功能仅使用CSS HTML和JS

function showAlerts(response) {
  let alertsElement = document.querySelector("#alerts");
  if (response.data.alerts && response.data.alerts.length > 0) {
    alertsElement.style.backgroundColor = "#981f15";
    alertsHTML = `<div class="alert"> ⚠️ ALERT! ${response.data.alerts[0].event} </div>`;
    alertsElement.innerHTML = alertsHTML;
  } else if (response.data.alerts && response.data.alerts.length < 1) {
    alertsElement.innerHTML = "";
  }
}

这是指向我正在使用的API的链接，我的git存储库

https://github.com/sarahabousenna/vanilla/vanilla-weather--weather-weather-weather-application

Answer 1

谢谢大家的回答，他们确实提供了帮助！

我还尝试了一些也有效的东西，

我将功能更新为＆gt;＆gt;

function showAlerts(response) {
  let alertsElement = document.querySelector("#alerts");
  if (response.data.alerts && response.data.alerts.length > 0) {
    alertsElement.style.backgroundColor = "#981f15";
    alertsHTML = `<div class="alert"> ⚠️ ALERT! ${response.data.alerts[0].event} </div>`;
    alertsElement.innerHTML = alertsHTML;
  } else {
    alertsElement.innerHTML = "";
    alertsElement.style.backgroundColor = "#fdf8f4";
  }
}

Answer 2

response.data.Alerts 将是不确定的，或者在没有警报的情况下为空。在第二个条件下，您将检查有效的 response.data.alerts 字段，这不是正确的条件。相反，以下片段可用于清除 div ：

function showAlerts(response) {
  let alertsElement = document.querySelector("#alerts");
  if (response.data.alerts && response.data.alerts.length > 0) {
    alertsElement.style.backgroundColor = "#981f15";
    alertsHTML = `<div class="alert"> ⚠️ ALERT! ${response.data.alerts[0].event} </div>`;
    alertsElement.innerHTML = alertsHTML;
  }
  if (!response.data.alerts || response.data.alerts.length === 0) {
    alertsElement.style.backgroundColor = "#000000";
    alertsElement.innerHTML = '';
  }
}