Как добавть класс исходя из рез-ов проверки?

Question

[ImSoSorry]

Сталкнулся с непонятной пока для меня проблемой, хочу сделать заглушку для мобильных, определяю с мобилки или нет, а вывести собственно заглушку не выходит, как быть?

<div id="mobilebody" class="hidden mobilebody"><p>Sorry, this site cannot be used on the phone :(</p></div>
   <script>
      if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
         alert("Работает");//работает все как и должно
         var elem = document.querySelector("#mobilebody")
         elem.classList.add("hidden");
       
      }
      </script>

<code>
.mobilebody {
      width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: black;
        z-index: 9999;
        position: fixed;
      }

.hidden {
  display: none;
}
</code>

Comments

[Пашенька]

Так тебе, наоборот, нужно удалить класс elem.classList.remove("hidden");

[ImSoSorry]

like-a-boss, проблема в том что он и ни добавляет и не удаляет

[Пашенька]

ImSoSorry, но alert, при этом вылетает на мобиле? Тогда добавь такой ещё alert(elem); и проверь есть там [object Object] или там undefined. Может у тебя несколько элементов на странице с id mobilebody. Есть причина иными словами. Если сделаешь codepen, тогда точно отвечу.

[Петр Мухуров]

очевидно, что у вас
document.querySelector("#mobilebody")
а судя по css
.mobilebody {}
а в html как?