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

Question

Вот мой код:

let btns = document.querySelectorAll('button');

for (let i = 0; i < btns.length; i++) {
  btns[i].onmouseover = (event) => {
    document.querySelector(`#result`).innerHTML = document.querySelectorAll(`#wrapper .innerElemType${i+1}`).length
  }
}

#wrapper {
  width: 10rem;
  background: yellow;
  margin-bottom: 1rem;
}

#btn {
  width: 10rem;
}

#result {
  width: 100px;
  height: 20px;
  margin-top: 40px;
  background: red;
  border-radius: 8px;
  text-align: center;
}

<div id="wrapper">
  <div class="Type1">
    <div class="Type1-1">
      <div class="Type1-1-1"></div>
      <div class="Type1-1-1"></div>
      <div class="Type1-1-1"></div>
    </div>
    <div class="Type1-1">
      <div class="Type1-1-2"></div>
      <div class="Type1-1-2"></div>
    </div>
  </div>

  <div class="Type2">
    <div class="Type2-1">
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
    </div>
    <div class="Type2-1">
      <div class="Type2-1-2"></div>
      <div class="Type2-1-2"></div>
      <div class="Type2-1-2"></div>
    </div>
  </div>

  <div class="Type3">
    <div class="Type3-1">
      <div class="Type3-1-1"></div>
      <div class="Type3-1-1"></div>
    </div>
    <div class="Type3-1">
      <div class="Type3-1-2"></div>
      <div class="Type3-1-2"></div>
      <div class="Type3-1-2"></div>
    </div>
  </div>

  <div class="Type4">
    <div class="Type4-1">
      <div class="Type4-1-1"></div>
      <div class="Type4-1-1"></div>
    </div>
    <div class="Type4-1">
      <div class="Type4-1-2"></div>
      <div class="Type4-1-2"></div>
    </div>
  </div>


  <button id="Type1">Type1</button>
  <button id="Type2">Type2</button>
  <button id="Type3">Type3</button>
  <button id="Type4">Type3</button>
  <button id="Type1-1">Type1-1</button>
  <button id="Type2-1">Type2-1</button>
  <button id="Type3-1">Type3-1</button>
  <button id="Type4-1">Type4-1</button>
  <button id="Type1-1-1">Type1-1-1</button>
  <button id="Type2-1-1">Type2-1-1</button>
  <button id="Type3-1-1">Type3-1-1</button>
  <button id="Type4-1-1">Type4-1-1</button>
</div>


<div id="result">Type1 Result</div>

у меня есть дерево, у главных div есть классы Type1, Type2, Type3, Type4. в основных div у нас есть подклассы, а в подклассах у нас есть подклассы.

как подсчитать количество элементов одного и того же класса при наведении на соответствующие кнопки? нужна помощь по JavaScript.

https://jsfiddle.net/739bL1a4/7/

Answer 1

Вам нужно взять id с вашей кнопки и включить его в ваш .querySelectorAll

let btns = document.querySelectorAll('button');

for (let i = 0; i < btns.length; i++) {
  btns[i].onmouseover = (event) => {
    document.querySelector(`#result`).innerHTML = document.querySelectorAll(`#wrapper .${event.target.id}`).length
  }
}

#wrapper {
  width: 10rem;
  background: yellow;
  margin-bottom: 1rem;
}

#btn {
  width: 10rem;
}

#result {
  width: 100px;
  height: 20px;
  margin-top: 40px;
  background: red;
  border-radius: 8px;
  text-align: center;
}

<div id="wrapper">
  <div class="Type1">
    <div class="Type1-1">
      <div class="Type1-1-1"></div>
      <div class="Type1-1-1"></div>
      <div class="Type1-1-1"></div>
    </div>
    <div class="Type1-1">
      <div class="Type1-1-2"></div>
      <div class="Type1-1-2"></div>
    </div>
  </div>

  <div class="Type2">
    <div class="Type2-1">
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
    </div>
    <div class="Type2-1">
      <div class="Type2-1-2"></div>
      <div class="Type2-1-2"></div>
      <div class="Type2-1-2"></div>
    </div>
  </div>

  <div class="Type3">
    <div class="Type3-1">
      <div class="Type3-1-1"></div>
      <div class="Type3-1-1"></div>
    </div>
    <div class="Type3-1">
      <div class="Type3-1-2"></div>
      <div class="Type3-1-2"></div>
      <div class="Type3-1-2"></div>
    </div>
  </div>

  <div class="Type4">
    <div class="Type4-1">
      <div class="Type4-1-1"></div>
      <div class="Type4-1-1"></div>
    </div>
    <div class="Type4-1">
      <div class="Type4-1-2"></div>
      <div class="Type4-1-2"></div>
    </div>
  </div>


  <button id="Type1">Type1</button>
  <button id="Type2">Type2</button>
  <button id="Type3">Type3</button>
  <button id="Type4">Type3</button>
  <button id="Type1-1">Type1-1</button>
  <button id="Type2-1">Type2-1</button>
  <button id="Type3-1">Type3-1</button>
  <button id="Type4-1">Type4-1</button>
  <button id="Type1-1-1">Type1-1-1</button>
  <button id="Type2-1-1">Type2-1-1</button>
  <button id="Type3-1-1">Type3-1-1</button>
  <button id="Type4-1-1">Type4-1-1</button>
</div>


<div id="result">Type1 Result</div>

Answer 2

Вам просто нужно изменить селектор CSS, чтобы искать div (ы) внутри оболочки, атрибут класса которой соответствует атрибуту кнопки, над которой вы наводите курсор.

`#wrapper div[class="${btns[i].innerText}"]`

Answer 3

const btns = document.querySelectorAll('button');
const resultDiv = document.getElementById('result');

btns.forEach(btn => {
	btn.addEventListener('mouseover', () => {
    const totalNumber = document.querySelectorAll('.' + btn.textContent).length;
  	resultDiv.textContent = totalNumber;
	});	
});