change the name of the javascript button

Question

I’m trying to make a player, and I can’t use icons, I have to do everything on one page, I can’t change the text of the button to Pause when the audio is running and Play when the audio is paused, what I tried was that more did not work `videoElement pause.();

            playButton.querySelector('span').className = "btPlay".innerHTML("Pause");`
` videoElement.play();
            playButton.querySelector('span').className = "btPause".innerHTML("Pause");`

What am I doing wrong? Here’s the js complete and the part of html which refers to the button

when I refresh the page it plays normally, then I press pause it pauses normally, and shows the button play only then I shake play it does not show the pause and these two errors appear

    var player, drag;
var audioElement, playButton, slider, audioButton, icoAudio;
function selectPlayer(elem){
    if( player != elem ){ 
        player = elem;
    }
    audioElement   = player.querySelector('audio'); //Objeto do player
    playButton     = player.querySelector('.play'); //Botão play e pause
    slider         = player.querySelector('.slider'); 
    sliderVol      = slider.querySelector('.bar');
    audioButton    = player.querySelector('.audio');
    //Ações do mouse
    playButton.addEventListener('click', playAudio);
    slider.addEventListener('mousedown', startDrag);
    slider.addEventListener('mousemove', showVolume);
    sliderVol.addEventListener('mousemove', showVolume);
    slider.addEventListener('mouseup', startDrag);
    sliderVol.addEventListener('mouseup', startDrag);
    sliderVol.querySelector('span').addEventListener('mouseup', startDrag);
    document.addEventListener('mouseup', startDrag);
    audioButton.addEventListener('click', mute);
}
function startDrag(event){
    if(event.type == "mousedown"){
        drag = true;
    }else{
        drag = false;
    }
}
function showVolume(event){
    if(drag){
        var w = slider.clientWidth;
        var x = (event.clientX) - slider.offsetLeft;
        var pctVol = x/w;

        if(pctVol >1 ){
            sliderVol.style.width = 100+"%";
            audioElement.volume = 1;
        }else if( pctVol < 0 ){
            sliderVol.style.width = 0+"%";
            audioElement.volume = 0;
        }else{
            sliderVol.style.width = (x/w) * 100+"%";
            audioElement.volume = pctVol;
        }
        if(pctVol<=0){
            audioButton.querySelector('span').className = 'ion-volume-mute';
        }else if(pctVol>0 && pctVol<=0.6){
            audioButton.querySelector('span').className = 'ion-volume-low';
        }else{
            audioButton.querySelector('span').className = 'ion-volume-medium';
        }
    }
}
function mute(){
    if(!audioElement.muted){
        audioElement.muted = true;
        audioElement.volume = 0;
        sliderVol.style.width = 0+"%";
        audioButton.querySelector('span').className = 'ion-volume-mute';
    }else{
        audioElement.muted = false;
        audioElement.querySelector('span').className = 'ion-volume-medium';
        audioElement.volume = 0.9;
        sliderVol.style.width = 90+"%";
    }
}
function playAudio(){
    // Verifica se a música foi iniciada
    if(audioElement.played.length != 0){
        // Verifica se a música foi pausada
        if(audioElement.played.start(0)==0 && !audioElement.paused){
            audioElement.pause(); // Pausa a música
            playButton.querySelector('span').className = "btPlay"; // Muda a imagem do botão pause para o play
            playButton.innerHTML = "<img src='http://i.cubeupload.com/Ad7lc8.png' width='25' height='25' alt='Reproduzir' title='Reproduzir'/>";
        }else{
            audioElement.play();
            playButton.querySelector('span').className = "btPause"; // Muda a imagem do botão play para pause
            playbutton.innerHTML = "<img src='http://i.cubeupload.com/SPRXTQ.png' width='25' height='25' alt='Pausar' title='Pausar'>";
        }
    }else{
        audioElement.play(); //Se não estiver pausada ela toca automaticamente
        playButton.querySelector('span').className = "btPause"; // Muda o icone do botão play para pause
        playButton.innerHTML = "<img src='http://i.cubeupload.com/SPRXTQ.png' width='25' height='25' alt='Pausar' title='Pausar'>";
    }
}

HTML

<!-- Botão de play e pause -->
            <div class="control left play">
                <!-- btPause -->
                <!-- Como padrão a imagem que apresenta no player é de pausar -->
                <span class="btPause"><img src='http://i.cubeupload.com/SPRXTQ.png' width='25' height='25' alt='Pausar' title='Pausar'></span>
            </div>

Answer 1

I think your problem is that you’re using the querySelector() wrongly. Once you want to search for a specific element, it’s easier to use its class or the id, in this case, if you are sure that the audio is playing, you know which class the icon has, if it is .btPlay or .btPause, having this, facilitates the search for the element.

Below I leave a practical and functional example that you can adopt and use. For the example, I made small changes and left the code very clean, now just take the logic and syntax and add to your code.

See that I select the play button using document.querySelect(".ClasseDoBotao"), If audio is playing, his class is btPause(pq will pause), otherwise it is btPlay. Once done, just change the element.

The error you are getting in your image, is that the querySelector is not finding the element on the screen because you are looking for it wrong using playButton.querySelector JS does not know what is playButton in this case.

var audioTocando = true;
document.querySelector('.control').onclick = function(){
  if(audioTocando){
        audioTocando = false;
        var playButton = document.querySelector('.btPause');
        playButton.className = "btPlay";
        playButton.innerHTML = "<img src='http://i.cubeupload.com/Ad7lc8.png' width='25' height='25' alt='Reproduzir' title='Reproduzir'/>";
  } else {
        audioTocando = true;
        var playButton = document.querySelector('.btPlay')
        playButton.className = "btPause";
        playButton.innerHTML = "<img src='http://i.cubeupload.com/SPRXTQ.png' width='25' height='25' alt='Pausar' title='Pausar'>";
  }
}

.btPause{
  border: 1px solid blue;
  min-height: 30px;
  min-width: 30px;
  display: inline-block;
}

.btPlay{
  border: 1px solid red;
  min-height: 30px;
  min-width: 30px;
  display: inline-block;
}

<div class="control left play">
    <span class="btPause">Click</span>
</div>

Answer 2

Hmm, I never got to use that method querySelector, usually I use document.getElementById or document.getElementsByClassName when I want to modify html elements.

For example, this particular case would be solved like this:

const playButton = document.getElementsByClassName("btPlay");
playButton.innerHTML = 'Pause'

As far as I know, it’s part of best practices to use Ids for these case types where only one isolated element will be modified

Using Id would look like this:

Javascript

const playButton = document.getElementById('playButton');
playButton.innerHTML = 'Pause'

HTML

<div class="control left play">
    <!-- btPause -->
    <div class="btPlay" id="playButton"></div>
</div>