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

Question

[intriga93]

https://jsfiddle.net/shc24g83/

Answer 1

[Александр]

document.querySelectorAll('[data-block="road"]').length;

Comments

[intriga93]

Александр, это работает в одном случае
а я пробую, вместо подставить переменную check
но ожидаемо не подставится https://jsfiddle.net/shc24g83/4/

[Александр]

intriga93,

let check = event.target.dataset.block;
console.log(document.querySelectorAll(`.wrap [data-block="${check}"]`).length);

Answer 2

[0xD34F]

Где находятся кликаемые элементы; где находятся элементы, которые надо посчитать; каким data-атрибутом задаётся связь между элементами:

const buttons = document.querySelector('.content');
const blocks = document.querySelector('.wrap');
const key = 'block';
const attr = `data-${key}`;
const attrSelector = `[${attr}]`;

Считаем:

buttons.addEventListener('click', e => {
  const button = e.target.closest(attrSelector);
  if (button) {
    const value = button.dataset[key];
    console.log(blocks.querySelectorAll(`[${attr}="${value}"]`).length);
  }
});

или

const onClick = ({ currentTarget: { attributes: { [attr]: { value } } } }) =>
  console.log(Array.prototype.reduce.call(
    blocks.children,
    (acc, n) => acc + (n.getAttribute(attr) === value),
    0
  ));

for (const n of buttons.children) {
  n.addEventListener('click', onClick);
}