rename button with javascript

Question

rename button with javascript

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

I'm trying to make a player, and I can not use icons, I have to do everything on one page, I can not change the text of the button to Pause when the audio is playing 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 is the js complete and the html part that refers to the

When I refresh the page it plays normally, then I press pause it pausea normally, and it shows the play button only then I press play it does not show the pause button and these two errors

varplayer,drag;varaudioElement,playButton,slider,audioButton,icoAudio;functionselectPlayer(elem){if(player!=elem){player=elem;}audioElement=player.querySelector('audio');//ObjetodoplayerplayButton=player.querySelector('.play');//Botãoplayepauseslider=player.querySelector('.slider');sliderVol=slider.querySelector('.bar');audioButton=player.querySelector('.audio');//AçõesdomouseplayButton.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);}functionstartDrag(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>

javascript

asked by anonymous 20.05.2018 / 04:51

2 answers

-1

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

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

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

As far as I know, it's also a good practice to use Ids for these case types where only one single 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>

20.05.2018 / 07:10

How do I assign one gameObject to another? UPLOAD of files via php and mysql

score 1 · Accepted Answer

I think your problem is using querySelector() wrongly. Since you want to fetch a specific element, it is easier to use its class or 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% with%, thus facilitating the search for the element.

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

See that I select the play button using .btPause , if audio is playing, its class is document.querySelect(".ClasseDoBotao") (it will pause), otherwise it is btPause . That done, just change the element.

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

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>