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

Question

[Luka Tarkhnishvili]

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

Код:

<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>

#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;
}

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
  }
}

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

Answer 1

[Ragtime Kitty]

Если правильно поняла, то как-то так можно