Why I am getting undefined on web page?

I am trying to display user status in the Gantt chart. But it returns undefined.

In this picture it is returning undefined and something else

.

I am using this method to return output

 var stat = groups.push(document.getElementsByClassName('status')); 
 var st = document.write(stat);

But it shows undefined and some server data instead of displaying 'Active' or 'Pause'

function userStatus(online) {
  const element = document.querySelector('.status');
  if (online) {
    element.classList.remove('offline');
    element.classList.add('online');
    element.innerText = 'Activ';
  } else {
    element.classList.remove('online');
    element.classList.add('offline');
    element.innerText = 'Pause';
  }
}
window.addEventListener('load', () => {
  userStatus(navigator.onLine);
  window.addEventListener('online', () => {
    userStatus(true);
  });
  window.addEventListener('offline', () => {
    userStatus(false);
  });
});

.app {
  height: 4.7vh;
  width: 4.7vw;
  display: flex;
  align-items: center;
  background-color: #000000;
  margin-left: 0.4px;
}

.status {
  margin-left: 10px;
  font-size: 15px;
  width: 2.5%;
}

.status.online {
  color: #41a700;
}

.status.offline {
  color: #f15c4f;
}

.app {
  margin-left: 261px;
}

.app {
  position: relative;
  margin-bottom: 5%;
}

<div class="app">
  <h5 class="status">User Status</h5>
</div>