@arttstyle
web-макака

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

Учусь 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>
  • Вопрос задан
  • 132 просмотра
Решения вопроса 3
@drawnofmymind
1)Передаешь Event,но не используешь.
2) "хочу знать какими способами можно еще заменить" - Можно при помощи event.target,тогда Event к месту.
3)var устарело,использую let или const
4)replace - заменить на add/remove
5)можно воспользоваться toggle
Ответ написан
SeaInside
@SeaInside
10 лет пилю все эти штуки
  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');


Ответ написан
sniggering_deus
@sniggering_deus Куратор тега JavaScript
I will live forever in the flame of your eyes.
1. VAR - уже устарело. Советую почитать про let и const, как, где и когда их использовать.
2. Вместо replace намного лучше использовать add - remove - toggle.
3. Переменные, классы, айдишники - нужно как-бы называть именами на Английском языке.

Адекватно ли то что я сотворил?


Нет.

Хочу знать какими способами можно еще заменить класс


Да хоть вот так:

const mainlist = document.querySelector('.list');
const activeClass = "active"; 
mainlist.addEventListener("click", function(event) {
const element = event.target.closest(".list__item");
if (!element) return;

const activeElement = element.parentElement.querySelector(".active");
activeElement && activeElement.classList.remove(activeClass);
(element === activeElement) || element.classList.add(activeClass);
});




В данном случае выбираем общий контейнер который будет родителем для всех элементов при клике на которые мы будем добавлять им активный класс, при этом активный класс добавится только тому элементу, по которому кликнули. Логично.

При повторном клике на элемент содержащий активный класс - он будет снят.
При клике на другие элементы активный класс переключается, т.е как и должен переключаться при правильном логическом подходе.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@vladdimir
Верстальщик
type скрипту можно не писать, если там js
// ...
.knopka // за такое сразу на горох

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы