Про innerHTML в javaScript

Question

У меня этот скрипт работает:

<button class="number" id="num" onclick="getNumber()">
    1
</button>
<script>
    function getNumber(){
        alert(document.getElementById('num').innerHTML); // 1
    }
</script>

Но почему не работает тоже самое по классу?

<button class="number" id="num" onclick="getNumber()">
    1
</button>
<script>
    function getNumber(){
        alert(document.getElementsByClassName('number').innerHTML); // undefined
    }
</script>

Answer 1

Потому что document.getElementById возвращает один элемент (или null), а document.getElementsByClassName возвращает коллекцию элементов (может быть - пустую).

<button class="number" id="num" onclick="getNumber()">1</button>
<button class="number" id="num" onclick="getNumber()">2</button>
<script>
  function getNumber() {
    [...document.getElementsByClassName('number')].forEach(item => console.log(item.innerHTML));
  }
</script>

Или Вам вот это надо?:

<button class="number" id="num" onclick="getNumber(this)">1</button>
<button class="number" id="num" onclick="getNumber(this)">2</button>
<script>
  function getNumber(item) {
    console.log(item.innerHTML);
  }
</script>

Answer 2

alert(document.getElementsByClassName('number')[0].innerHTML);