Как при повторном клике на элемент удалить его из массива? js

Question

У меня есть две кнопки и нужно, чтобы когда я первый раз кликал по одной из них, атрибут этой кнопки добавлялся в массив, а при повторном клике удалялся. Мой код не работает, что здесь не так? Буду благодарен за подсказку

let buttonArr = [];
let buttons = document.querySelectorAll('.button');
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', (event) => {
        let thisButton = event.currentTarget;
        let buttonAtr = JSON.parse(thisButton.getAttribute('data-info'));
        selectButton(buttonAtr);
    });
}

function selectButton(btn) {
    let index = buttonArr.indexOf(btn);

    if(index == -1) {
        buttonArr.push(btn);
    } else {
        buttonArr.splice(index, 1);
    }

    console.log(buttonArr);
}

Answer 1

Так попробуйте

let buttonArr = [];
let buttons = document.querySelectorAll('.button');
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', (event) => {
        let thisButton = event.currentTarget;
        let buttonAtr = thisButton.getAttribute('data-info');
        selectButton(buttonAtr);
    });
}

function selectButton(btn) {
    let index = buttonArr.indexOf(btn);

    if(index == -1) {
        buttonArr.push(btn);
    } else {
        buttonArr.splice(index, 1);
    }

    console.log(buttonArr);
}

либо напишите свой аналог

 buttonArr.indexOf(btn)

Answer 2

Если вы хотите написать это на JavaScript, я бы предложил использовать classList.toggle(). Вы можете посмотреть демонстрацию по ссылке.

<div class="button-container">
  <button data-info="foo">1</button>
  <button data-info="bar">2</button>
  <button data-info="baz">3</button>
</div>
<script>
(function() {

  const getSelectedButtons = () => document.querySelectorAll('.button-container > button.process');
  const getButtons = () => document.querySelectorAll('.button-container > button');
  const getContainer = () => document.querySelector('.button-container');

  getButtons().forEach((b) => b.onclick = () => b.classList.toggle('process'));
  getContainer().onclick = () => console.log(Array.from(getSelectedButtons()).map((b) => b.dataset.info));

})();
</script>

Answer 3

let buttonArr = [];
let buttons = document.querySelectorAll('.button');
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', (event) => {
        let thisButton = event.currentTarget;
        let buttonAtr = JSON.parse(thisButton.getAttribute('data-info'));
        selectButton(buttonAtr);
    });
}

function selectButton(btn) {
    let btnString = JSON.stringify(btn),
        index = buttonArr.findIndex(obj => JSON.stringify(obj) == btnString);
        
    if(index === -1) {
        buttonArr.push(btn);
    } else {
        buttonArr.splice(index, 1);
    }

    console.log(buttonArr);
}

<button class="button" data-info='{"q": 1, "w": 2}'>1</button>
<button class="button" data-info='{"q": 21, "w": 22}'>2</button>

БЛОГ НА HUSL

Как при повторном клике на элемент удалить его из массива? js

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