Baby developer here. So, I’m creating a weather app using Axios and open weather API to grab live forecast info. I created an empty div in my HTML and then created a function that would show an alert at the bottom of the page ONLY if the city that was searched for has an active weather alert. It works great, the only issue I have is that once I search for a city that has an active alert the alert just stays there, does not disappear unless I refresh the page.
So for example if I search for Paris and paris has an active alert it appears but then if i search for rome and rome does not have an active alert, the paris alert just stays there until I refresh the page

Heres my function: I’m using css html and js only

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

Heres a link to the API I’m using and my Git repository

https://openweathermap.org/api/one-call-3

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

CodePudding user response：

response.data.alerts would be undefined or empty in case there are no alerts. Under the second if condition, you are checking for a valid response.data.alerts field, which is not the correct condition. Instead, the following snippet can be used to clear out the div:

function showAlerts(response) {
  let alertsElement = document.querySelector("#alerts");
  if (response.data.alerts && response.data.alerts.length > 0) {
    alertsElement.style.backgroundColor = "#981f15";
    alertsHTML = `<div > ⚠️ 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 = '';
  }
}

CodePudding user response：

Here are two Solutions

• Fix your if else if condition

I made a few changes to this function:

//***** ⚠️ FUNCTION: Weather Warning alert *******//

function showAlerts(response) {
  const alertsElement = document.querySelector("#alerts");
  alertsElement.style.backgroundColor = "#981f15";
  const alertsHTML = `<div > ⚠️ ALERT! ${response.data.alerts[0].event} </div>`;
  alertsElement.innerHTML = response.data.alerts?.length ? alertsHTML : '';
  }
}

• You can use setTimeout after X milliseconds to clear the alert inside the if condition

//***** ⚠️ FUNCTION: Weather Warning alert *******//

function showAlerts(response) {
  if (response.data.alerts?.length) {
    const alertsElement = document.querySelector("#alerts");
    alertsElement.style.backgroundColor = "#981f15";
    const alertsHTML = `<div > ⚠️ ALERT! ${response.data.alerts[0].event} </div>`;
    alertsElement.innerHTML = alertsHTML;
    //NEW
    setTimeout(() => alertsElement.innerHTML = '', 3000)
  }
}