Error on "else" component - JS

[ryanA_2]

I have a notification toast that shows a div and changes its classes based on the user’s connection status but my “else” in JS is showing an error. I checked to see if I had extra brackets or semi-colons but didn’t see any extra. Anyone know why? Error message when hovered

const wrapper = document.querySelector(".wrapper"),
  toast = wrapper.querySelector(".toast"),
  title = toast.querySelector("span"),
  subTitle = toast.querySelector("p"),
  wifiIcon = toast.querySelector(".icon"),
  closeIcon = toast.querySelector(".close-icon");

  window.onload = ()=>{
    function ajax(){
      let xhr = new XMLHttpRequest();
      xhr.open("GET","https://jsonplaceholder.typicode.com/posts",true);
      xhr.onload = ()=>{
        if(xhr.status == 200 && xhr.status <300){
          toast.classList.remove("offline");
          title.innerText = "Back Online";
          subTitle.innerText = "You've regained internet connection.";
          wifiIcon.innerHTML = '<i class="uil uil-wifi"></i>';
          closeIcon.onclick = ()=>{
            wrapper.classList.add("hide");

          setTimeout(()=>{
            wrapper.classList.add("hide");
          }, 5000);
        }else{
            offline();
          }
        }
        xhr.onerror = ()=>{
          offline();
        }
        xhr.send();
      }
      function offline(){
        wrapper.classList.remove("hide");
        toast.classList.add("offline");
        title.innerText = "No Connection";
        subTitle.innerText = "Please connect to the internet.";
        wifiIcon.innerHTML = '<i class="uil uil-wifi-slash"></i>';
      }
      setInterval(()=>{
        ajax();
      }, 100);
    }
  }

[lasjorg]

You didn’t close the closeIcon.onclick function and you have an extra } at the end. But it’s hard to tell with the formatting.

Didn’t test it, but I think it looks right.

window.onload = () => {
  function ajax() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);

    xhr.onload = () => {
      if (xhr.status == 200 && xhr.status < 300) {
        toast.classList.remove('offline');
        title.innerText = 'Back Online';
        subTitle.innerText = "You've regained internet connection.";
        wifiIcon.innerHTML = '<i class="uil uil-wifi"></i>';
        closeIcon.onclick = () => {
          wrapper.classList.add('hide');
          setTimeout(() => {
            wrapper.classList.add('hide');
          }, 5000);
        };
      } else {
        offline();
      }
    };

    xhr.onerror = () => {
      offline();
    };

    xhr.send();
  }

  function offline() {
    wrapper.classList.remove('hide');
    toast.classList.add('offline');
    title.innerText = 'No Connection';
    subTitle.innerText = 'Please connect to the internet.';
    wifiIcon.innerHTML = '<i class="uil uil-wifi-slash"></i>';
  }

  setInterval(() => {
    ajax();
  }, 100);
};

BTW, calling the ajax function every 100 milliseconds seems a bit aggressive and isn’t a very nice way to use a free API. You may get rate-limited or blocked doing that.