Как сделать так чтобы при клике на фоновую картинку не срабатывал скрипт, и значение data оставалось текущим на чистом js?

Question

Задача была в следующем: при клике на этаж квартиры, элементу добавляется класс, а у счётчика этажей меняется число этажа в зависимости от выбраного. Реализовал через data атрибут, но есть проблема. Сама картинка, по которой производится клик - svg формата, и состоит из фонового изображения и этажей. У этажей есть data атрибут и при клике на них все нормально, но при клике на фоновую картинку, значение счётчика просто пропадает.

Как сделать так, чтобы при клике на фоновую картинку значение счётчика не пропадало и было равно выбраному этажу (если выбран 2 этаж - то значение 2 и т.д). Вот ссылка на проект: https://plupiks.github.io/melody-landing/

const houseFloor = document.querySelector('.house-img');
const floorCountNumb = document.querySelector('.hero--value');

// делаю выбранный этаж активным
houseFloor.addEventListener('click', function (e) {
  var floors = document.querySelectorAll(".house-floor");
  var floorActive = e.target;
  Array.from(floors).forEach(i => {
    i.classList.remove("house-img--active");
  })
  floorActive.classList.add("house-img--active");

// присваивание номера этажа
  var floorCount = e.target.dataset.floor;
  floorCountNumb.textContent = floorCount;
  console.log(floorCount);
})

Answer 1

Добавить проверку. Когда кликаешь не на этаже e.target.dataset.floor undefined

houseFloor.addEventListener('click', function (e) {
  var floors = document.querySelectorAll(".house-floor");
  var floorActive = e.target;
  Array.from(floors).forEach(i => {
    i.classList.remove("house-img--active");
  })
  floorActive.classList.add("house-img--active");
  var floorCount = e.target.dataset.floor;
  
  if(floorCount) floorCountNumb.textContent = floorCount;
  console.log(floorCount);
})

БЛОГ НА HUSL

Как сделать так чтобы при клике на фоновую картинку не срабатывал скрипт, и значение data оставалось текущим на чистом js?

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