He estado tratando de crear un javascript para detectar eventos en línea y fuera de línea cuando un usuario inicia sesión en su cuenta, pero actualmente tengo un desafío sobre cómo hacer que funcione el evento fuera de línea, ya que mi ícono de evento se muestra verde incluso cuando el usuario está desconectado, en mi caso, ¿cuál es la mejor manera de hacerlo? ¿Es este problema de mi script? o html o css? Aquí está mi script
<script> window.addEventListener('load', function() { var user_status = document.getElementById("user_status"); var log = document.getElementById("log"); function updateOnlineStatus(event) { var condition = navigator.onLine ? "status_online" : "offline"; user_status.className = condition; user_status.innerHTML = condition.toUpperCase(); log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); } window.addEventListener('status_online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus); }); </script>mi estilo de icono de estado css
/* ---------------------------------- */ /* user status icon ------------------------------------- */ .user_status { position: absolute; content: ""; height: 14px; width: 14px; background-color: #c0c0c0; bottom: 0; right: 0; display: block; border: 2.5px solid #fff; border-radius: 50%; visibility: hidden; } .user_status.status_online { background-color: #38b653; visibility: visible; }Aquí está mi html para mostrar el ícono de estado
<div class="profiles_content"> <div class="relative uk-transition-toggle overflow-hidden"> <div uk-form-custom class="w-full py-5" > <div class="profile_avatar"> <div class="profile_avatar_holder"> <img src="{{ profile_image }}" alt=""> </div> <div class="user_status status_online"></div>De acuerdo con la página de MDN , no hay un evento status_online , sin embargo, hay un evento online
Otro error que tiene es que no hay ningún elemento con id user_status , por lo que deberá agregar una identificación o usar querySelector(".user_status") en su lugar.
Además, está intentando reemplazar el nombre de clase user_status className eliminará del elemento, sin embargo, su css depende de ese nombre.
Entonces, en situaciones como esta, probablemente sea un mejor enfoque usar un atributo en lugar del nombre de la clase, de esta manera no tiene que preocuparse por la clase de "estado" anterior, esto es especialmente útil si tiene más de 2 condiciones.
const user_status = document.getElementById("user_status"); function updateOnlineStatus(event) { let condition = navigator.onLine ? "online" : "offline"; //dataset is simpliest to use, it automatically adds attribute to the element user_status.dataset.status = condition; console.log("Event: " + event.type, " Status: " + condition); } window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus); updateOnlineStatus({}); //set initial status /* ---------------------------------- */ /* user status icon ------------------------------------- */ .user_status { position: absolute; content: ""; height: 14px; width: 14px; background-color: #c0c0c0; bottom: 0; right: 0; display: block; border: 2.5px solid #fff; border-radius: 50%; /* this kind of redundent */ /* visibility: hidden; */ } .user_status[data-status="online"] { background-color: #38b653; visibility: visible; } /* ignore this */ .profile_avatar { display: inline-block; position: relative; } <div class="profile_avatar"> <div class="profile_avatar_holder"> <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj" alt=""> </div> <div id="user_status" class="user_status"></div> </div>