Проверка кривоты скрипта?

Question

[art style]

Учусь jsу немножко, сотворил сие примитивное творение по замене класса
хочу знать какими способами можно еще заменить класс и адекватно ли то что я сотворил?
и как определить вообще, криво косо или нет, если работает?

<script type="text/javascript">
var btn= document.querySelector('.knopka');
var cont= document.querySelector('.text');
      btn.addEventListener('click', function(event) {
        if (cont.classList.contains('text') ) {
          cont.classList.replace('text', 'text2');
        } else {
          cont.classList.replace('text2','text');
        }
      });
</script>

Answer 1

[drawnofmymind]

1)Передаешь Event,но не используешь.
2) "хочу знать какими способами можно еще заменить" - Можно при помощи event.target,тогда Event к месту.
3)var устарело,использую let или const
4)replace - заменить на add/remove
5)можно воспользоваться toggle

Comments

[art style]

понятно. с toggle интересней. а как теперь между ними анимацию сделать? transition не работает...

[drawnofmymind]

код css покажи

[art style]

drawnofmymind, сделал через visibility а не через display заработало...
и теперь проблема в том что элемент сдвинут относительно кнопки на left:-500px и анимация идет слева а кнопка справа...

[drawnofmymind]

opacity попробуй

Answer 2

[Максим Морев]

1. Класс .knopka - омерзительно, в работе должны использоваться только английские слова (хотя на сайте Сбербанка пару лет назад видел "telefon_batton", то было больнее).
   
2. Если навешиваете события по селектору, то будет хорошей идеей добавить элементу дополнительный класс именно для JS с соответствующим префиксом (.js-button).
   
3. Логика работы вашей функции такова, что вам проверка просто не нужна
   

   if (cont.classList.contains('text') ) {
     cont.classList.replace('text', 'text2');
   } else {
     cont.classList.replace('text2','text');
   }
   
   // Заменяется на 
   cont.classList.toggle('text');
   cont.classList.toggle('text2');

   
   
   

Comments

[art style]

да это просто пример ввел для понятности. с 2 строчками toggle еще лучше стало. ранее при проверке добавлялся класс а не менялся

Answer 3

[Владимир Солнцев]

type скрипту можно не писать, если там js

// ...
.knopka // за такое сразу на горох

btn.addEventListener('click', function(event) { 
// Если объект event не используется в функции, можно не объявлять аргумент
// ...
cont.classList.replace('text', 'text2'); 
// метода replace в свойстве classList вроде нет, если сами сделали или библиотека, 
// то не надо так, плохо расширять чужие классы

Comments

[art style]

да вроде есть...
https://devdocs.io/dom/element/classlist

[Владимир Солнцев]

art style, вижу, а на mdn нет, и вообще первый раз этот метод вижу в контексте classList. То, что его почти не используют может говорить либо о сложностях с совместимостью либо о непредсказуемом поведении. Поэтому все равно лучше не использовать. Вечером буду курить спецификацию на эту тему уже я)