Nie działa mi podmiana elementu(JavaScript)

Question

Witam,

chciałbym podmienić zawartość diva "btn", ale nie działa.

<div class="btn"><button onclick="play();">PLAY</button></div>
    <script>
        const nova = new Audio('audio/nova.mp3')
        function play() {
            nova.play();
            document.GetElementById('btn').innerHTML='<button onclick="stop();">STOP</button>';
        }
        function stop() {
            nova.stop();
            document.GetElementById('btn').innerHTML='<button onclick="play();">PLAY</button>'
        }

Z góry dziękuję za odpowiedzi

Answer 1

1. pobieranie elementu po id to getElementById a nie GetElementById

2. getElementById jak nazwa wskazuje pobiera elementy po id nie po klasie. <div id="btn">

3. mniej problematyczne będzie ukrywane elementu zamiast podmiana diva i dublować kod.

Comments

Jak wskazać element po klasie?

---

document.getElementsByClassName('btn') // zwraca listę elementów z klasą btn
document.querySelectorAll('.btn') // zwraca listę elementów z klasą btn
document.querySelector('.btn') // zwraca pierwszy element z klasą btn

 

---

A jak zrobić bez dublowania dla 20 takich przycisków, gdzie każdy ma inną treść?

---

Dodać jedna wspólna klasę do wszystkich 20 elementów. Opisz co chcesz zrobić / jaki masz HTML będzie prościej znaleźć jakieś rozwiązanie.

---

@MacieKap, 

A jak zrobić bez dublowania dla 20 takich przycisków, gdzie każdy ma inną treść?

Sprawdź: How JavaScript Event Delegation Works