Как написать код, чтобы количество карточек было равно значению в списке при клике?

Question

[hyipojer]

<section class="memory-game memory-game-hidden">

      <div class="memory-card" data-framework="BELKA">
         <img class="front-face" src="img/BELKA.jpg" alt="BELKA">
         <img class="back-face" src="img/card-game.svg" alt="Memory Card">
      </div>

      <div class="memory-card" data-framework="BELKA">
         <img class="front-face" src="img/BELKA.jpg" alt="BELKA">
         <img class="back-face" src="img/card-game.svg" alt="Memory Card">
      </div>

      <div class="memory-card" data-framework="CHEREPAHA">
         <img class="front-face" src="img/CHEREPAHA.jpg" alt="CHEREPAHA">
         <img class="back-face" src="img/card-game.svg" alt="Memory Card">
      </div>

      <div class="memory-card" data-framework="CHEREPAHA">
         <img class="front-face" src="img/CHEREPAHA.jpg" alt="CHEREPAHA">
         <img class="back-face" src="img/card-game.svg" alt="Memory Card">
      </div>

...еще несколько карточек

<div class="counter-info">
            <span class="count">Выбери количество карточек</span>
               <ul class="counter-row">
                  <li value="6"> 6 </li>
                  <li value="10"> 10 </li>
                  <li value="14"> 14 </li>
                  <li value="18"> 18 </li>
               </ul>
         </div>

Comments

[hyipojer]

Карточек всего 18, уже готовые div'ы.
При нажатие на количество карточек нужно, чтобы ненужные скрывались.
Я попробовал

const sectionDivArray = [...document.getElementsByClassName('memory-card')];

сам массив меняется, но на странице количество div'ов не менятеся. Что я делаю не так?

[Egor Kharlamov]

hyipojer, если я правильно понимаю, можно добавить класс типа "hidden". Выбрать все карточки которые есть в section и сравнить на соответствие с массивом sectionDivArray по аттрибуту data-framework. Если карточка со страницы не входит в состав sectionDivArray - то добавить ей класс hidden, иначе удалить этот класс.

[hyipojer]

Egor Kharlamov, Вы просто читаете мои мысли! Не могу реализовать этот код, бьюсь об заклад, что это простая задача. Но без помощи мне не решить

[Egor Kharlamov]

hyipojer, вот накидал что-то вроде бы такое https://jsfiddle.net/ewnh8ct0/11/

[hyipojer]

Egor Kharlamov, Спасибо Вам Большое! буду теперь настраивать под себя

Answer 1

[Egor Kharlamov]

Приветствую!
1) В обработчике клика достаем значение аттрибута value.
2) Создаем DOM-елементы в цикле и аппендим их в элемент с тегом section (https://www.javascripttutorial.net/dom/manipulatin...)

Comments

[hyipojer]

Спасибо Вам за ответ!
Моя вина что не предоставил больше информации, требуется другое решение

[Egor Kharlamov]

hyipojer, можете ее предоставить и мы найдем это решение :)

[hyipojer]

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

Answer 2

[hyipojer]

Egor Kharlamov @madbaddad
hyipojer, вот накидал что-то вроде бы такое https://jsfiddle.net/ewnh8ct0/11/