-1

Делаю сайт кинотеатра. Нужно, чтобы при клике на определённое место оно добалвлось в массив, а при повторном удалялось. Есть такой код, но не работает, что здесь не так?

let seats = document.querySelectorAll('.seats');
let arrSeats = [];
for(let i = 0; i < seats.length; i++) {
    seats[i].addEventListener('click', (event) => {
        let eventButton = event.currentTarget;
        let seatsAtr = eventButton.getAttribute('data-info');
        seatsAtr = JSON.parse(seatsAtr);
        selectSeats(seatsAtr);
        colorSeats(eventButton, seatsAtr);
    });
}

function selectSeats(seat) {
    if(arrSeats.indexOf(seat) == -1) {
        arrSeats.push(seat);
    } else {
        arrSeats.splice(seat, 1);
    }
...

1 ответ 1

1

Что здесь не так?

splice хочет arr.splice(начальный_индекс, сколько_элементов_удалить_считая_оттуда) а вы даете ему значение элемента, вместо его индекса. Вообще, функция должна выглядеть так:

function selectSeats(seat) {
  let index = arrSeats.indexOf(seat);

  if (index == -1) {
    arrSeats.push(seat);
  } else {
    arrSeats.splice(index, 1); // <--
  }
}

Но есть другая проблема: в параметр seat прилетает объект, созданный через JSON.parse. Даже если объекты созданы из одинаковых исходных строк, они всё еще будут уникальными объектами (не равными друг другу):

let arr = [
  {"a": 1, "b": 2}
];

let str = '{"a": 1, "b": 2}';
console.log( JSON.parse(str) === JSON.parse(str) ); // false

console.log( {"a": 1, "b": 2} === {"a": 1, "b": 2} ); // false

console.log( arr.indexOf( {"a": 1, "b": 2} ) ); // -1

Вообще, странно хранить текстовый объект в атрибуте HTML-элемента и при каждом клике заново его парсить. Нужно или менять струтуру данных полностью (что предпочтительнее) или хранить и искать индекс прямо текстового значения thisButton.getAttribute('data-info') без JSON.parse. Не зная задачу целиком, невозможно сказать точнее.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.