Как сделать провекрку на наличие class?

Question

Как проверить так что бы в event.target попадал только один class а всё остальное игнорировалось то есть return false ?

При клике на select-item происходит копирование текста в item но когда я написал проверку то это перестало работать

Вот моя попытка

let item = document.querySelector(".item");
let select = document.querySelector(".select");

select.addEventListener("click", function(e) {
  e = event.target;
  if (!e.target.classList.contains == ".select-item") return;
  item.innerHTML = e.innerHTML;
})

.item,
.select-item {
  padding: 10px;
  border: 1px solid red;
  box-sizing: border-box;
}

.select {
  margin-top: 50px;
}

.select-item {
  margin-top: 4px;
}

<div class="item">
  Выберите пункт
</div>
<div class="select">
  <div class="select-item">
    Бублик
  </div>
  <div class="select-item">
    Пончик
  </div>
  <div class="select-item">
    Пышка
  </div>
  <div class="select-item">
    Булочка
  </div>
</div>

Answer 1

Что то логика не понятна, зачем нам клик на select вешать. При клике на лубой элемент с классом .select-item - вставляем текст:

let item = document.querySelector(".item");
let select = document.querySelectorAll(".select-item");

select.forEach(element=>{

  element.addEventListener("click", function(e) {
    item.innerHTML = element.innerHTML;
  })
  
})

.item,
.select-item {
  padding: 10px;
  border: 1px solid red;
  box-sizing: border-box;
}

.select {
  margin-top: 50px;
}

.select-item {
  margin-top: 4px;
}

<div class="item">
  Выберите пункт
</div>
<div class="select">
  <div class="select-item">
    Бублик
  </div>
  <div class="select-item">
    Пончик
  </div>
  <div class="select-item">
    Пышка
  </div>
  <div class="select-item">
    Булочка
  </div>
</div>

Answer 2

.classList.contains - это метод, соответственно его надо вызывать иначе. И еще, вы два раза берете аттрибут target

let item = document.querySelector(".item");
let select = document.querySelector(".select");

select.addEventListener("click", function(e) {
  e = e.target;
  if (!e.classList.contains("select-item")) return;
  item.innerHTML = e.innerHTML;
})

.item,
.select-item {
  padding: 10px;
  border: 1px solid red;
  box-sizing: border-box;
}

.select {
  margin-top: 50px;
}

.select-item {
  margin-top: 4px;
}

<div class="item">
  Выберите пункт
</div>
<div class="select">
  <div>
    Бублик
  </div>
  <div class="select-item">
    Пончик
  </div>
  <div class="select-item">
    Пышка
  </div>
  <div class="select-item">
    Булочка
  </div>
</div>

БЛОГ НА HUSL

Как сделать провекрку на наличие class?

Ответы (2 шт):