Javascript-форум - Как переключать кнопки и собирать массив?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как переключать кнопки и собирать массив? (https://javascript.ru/forum/misc/82414-kak-pereklyuchat-knopki-i-sobirat-massiv.html)

Как переключать кнопки и собирать массив?

Здравствуйте. Есть вот такая конструкция: https://jsfiddle.net/gojpc5ru/

последний этап: формирование массива - вроде мне удался, хотя я не уверена, что я всё правильно сделала... может оно не так должно писаться?

но вот с кнопкой я не могу.

Логика такая:

одно нажатие по блоку - добавляет класс active
одно нажатие по другому блоку - убирает класс у предыдущего блока и добавляет класс новому блоку
второе нажатие по активному блоку - убирает у него класс active
нажатие на кнопку "Добавить" убирает внутри группы все active и добавляет запись в массив
Внутри группы может существовать только 1 класс active

спотык у меня на моменте, что я дважды должна писать parentNode. Это норм? ну и проблема с отменой класса при нажатии на другой блок.

зависимые клики по блокам, один активный блок

nastya97core,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .group {
            background: #cccccc;
            margin: 20px;
            width: min-content;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .blocks {
            display: flex;
        }
        p {
            flex-basis: 100%
        }
        .block {
            width: 50px;
            height: 50px;
            margin: 5px;
            cursor: pointer;
            background: blue;
            color: white;
            font-size: 24px;
            text-align: center;
            line-height: 50px;
        }
        .active {
            background: red;
        }
        .enter {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            background: #999999;
            margin: 5px
        }
    </style>
    <script>
        const array = [];
        document.addEventListener("click", ({ target }) => {
            const parent = target.closest(".group");
            if (!parent) return;
            const active = parent.querySelector(".active");
            if (target.classList.contains("block")) {
                target.classList.toggle("active");
                if (active && target != active) active.classList.remove("active");
            }
            if (target.classList.contains("enter") && active) {
                const name = parent.querySelector(".name").textContent;
                const activeSize = active.textContent;
                active.classList.remove("active");
                array.push([name, activeSize])
                show.textContent = JSON.stringify(array, "", "");
            }
        });
    </script>
</head>
<body>
    <pre id="show"></pre>
    <div class="group">
        <p class="name">Первый</p>
        <div class="blocks">
            <div class="block">1</div>
            <div class="block">2</div>
            <div class="block">3</div>
            <div class="block">4</div>
        </div>
        <div class="enter">Добавить</div>
    </div>
    <div class="group">
        <p class="name">Второй</p>
        <div class="blocks">
            <div class="block">1</div>
            <div class="block">2</div>
            <div class="block">3</div>
            <div class="block">4</div>
        </div>
        <div class="enter">Добавить</div>
    </div>
    <div class="group">
        <p class="name">Третий</p>
        <div class="blocks">
            <div class="block">1</div>
            <div class="block">2</div>
            <div class="block">3</div>
            <div class="block">4</div>
        </div>
        <div class="enter">Добавить</div>
    </div>
</body>
</html>

рони,
Спасибо огромное. Я не рассчитывала получить готовый результат, но сильно на это надеялась)

У меня ещё один вопрос. Я немного изменила ваш код, но упёрлась в возможное отсутствие объекта

for (let i = 0, count = toCart.length; i < count; i++) {
  toCart[i].addEventListener("click", function() {
    let parent = this.closest(".info");
    let myactive = parent.querySelector(".active-size");
    let name = parent.querySelector(".name-item").innerText;
    let btnsize = parent.querySelector(".btn-size");
    if ((btnsize && myactive) || !btnsize) {
        let size = myactive.innerText || false;
        addToCart([name, size], this);
        myactive.classList.remove("active-size");
      } else {
        animErrShake(".head-size p");
      }

  });
}

У меня есть ситуация, когда btnsize может вообще не быть, тогда кнопка должна нажаться и отправить в массив второе значение false.

Я делаю

// если есть кнопка и она активна либо если кнопки вообще нет
if ((btnsize && myactive) || !btnsize) {
// и вот здесь myactive может не быть, а я пытаюсь достать из него innerText
// на этом месте у меня как раз и возвращает ошибку
let size = myactive.innerText || false;

вообще вот так у меня работает:

if (btnsize) {
      if (myactive) {
        let size = myactive.innerText;
        addToCart([name, size], this);
        myactive.classList.remove("active-size");
      } else {
        animErrShake(".head-size p");
      }
    } else {
      addToCart([name, false], this);
    }

просто тут дважды addToCart вызывается и я думала как-нибудь оптимизировать код.

Скажите пожалуйста, что можно сделать с этой строчкой?

let size = myactive.innerText || false;

nastya97core,
не могу помочь, не понимаю описание.

Цитата:

Сообщение от nastya97core

let size = myactive.innerText || false;

Как вариант...

let size = myactive ? myactive.innerText || false : false;