Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Não consigo muda o icone do começar

const html = document.querySelector('html');
const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');
const banner = document.querySelector('.app__image');
const titulo = document.querySelector('.app__title');
const botoes = document.querySelectorAll('.app__card-button');
const startPauseBt = document.querySelector('#start-pause');
const musicaFocoInput = document.querySelector('#alternar-musica');
const iniciarouPausarBt = document.querySelector('#start-pause')
const alterarIconePlay = document.querySelector('.app__card-primary-butto-icon');
const musica = new Audio('/sons/luna-rise-part-one.mp3');
const musicaPause = new Audio('/sons/pause.mp3');
const musicaPlay = new Audio('/sons/play.wav');
const musicaFim = new Audio('/sons/beep.mp3');
musica.loop = true;

let tempoDecorridoEmSegundos = 10;
let intervaloID = null;

musicaFocoInput.addEventListener('change', () => {
    if(musica.paused){
        musica.play();
    } else {
        musica.pause();
    }
})
focoBt.addEventListener('click', () => {
    alterarContexto('foco')
    focoBt.classList.add('active')
});

curtoBt.addEventListener('click', () => {
    alterarContexto('descanso-curto')
    curtoBt.classList.add('active')
})

longoBt.addEventListener('click', () => {
    alterarContexto('descanso-longo')
    longoBt.classList.add('active')
})

function alterarContexto(contexto) {
    botoes.forEach((contexto) => {
        contexto.classList.remove('active')
    })
    html.setAttribute('data-contexto', contexto)
    banner.setAttribute('src', `/imagens/${contexto}.png`)

    switch(contexto){
        case 'foco':
            titulo.innerHTML = `
            Otimize sua produtividade,<br>
            <strong class="app__title-strong">mergulhe no que importa.</strong>
            `
            break;
        case 'descanso-curto':
            titulo.innerHTML = `
            Que tal dar uma respirada?<br>
            <strong class="app__title-strong"> Faça uma pausa curta!</strong>
            `
            break;
        case 'descanso-longo':
            titulo.innerHTML = `
            Hora de voltar à superfície.<br>
            <strong class="app__title-strong">Faça uma pausa longa.</strong>
            `
            default:
            break;

    }
}

const contagemRegressiva = () => {
    if (tempoDecorridoEmSegundos <= 5) {
        //musicaFim.play()
        zerar()
        return
    }
    tempoDecorridoEmSegundos -= 1;
    console.log("temporizador", + tempoDecorridoEmSegundos)
}

startPauseBt.addEventListener('click', iniciarouPausar)

function iniciarouPausar() {
    if (intervaloID) {
        musicaPause.play()
        zerar()
        return
    }
    musicaPlay.play();
    intervaloID = setInterval(contagemRegressiva, 1000)
    iniciarouPausarBt.textContent = "Pausar";
    alterarIconePlay.setAttribute('src', '/imagens/pause.png')
}

function zerar(){
    clearInterval(intervaloID)
    iniciarouPausarBt.textContent = "Começar"
    alterarIconePlay.setAttribute('src', '/imagens/play_arrow.png')
    intervaloID = null;
}

# Alguém consegue me dizer pq não estou conseguindo mudar os ícones ? Quando eu aperto começar o sinal de 'play' some, e não aparece mais, e não consigo nem inserir o ícone de pause e nem inserir o de play novamente.
4 respostas

Olá, tudo bem ?

Pode enviar um print do HTML na parte do botão de play ?

Obrigado.

Olá,

penso que o problema é que usaste aspas simples e não crase. Tenta a seguinte versão:

function iniciarouPausar() {
    if (intervaloID) {
        musicaPause.play()
        zerar()
        return
    }
    musicaPlay.play();
    intervaloID = setInterval(contagemRegressiva, 1000)
    iniciarouPausarBt.textContent = "Pausar";
    alterarIconePlay.setAttribute('src', `/imagens/pause.png`)
}

function zerar(){
    clearInterval(intervaloID)
    iniciarouPausarBt.textContent = "Começar"
    alterarIconePlay.setAttribute('src', `/imagens/play_arrow.png`)
    intervaloID = null;
}

Olá, boa tarde ou qualquer horário no qual você esteja lendo, primeiramente amigo, não é necessário usar a crase visto que ela é para elementos html, o seu código apresenta um pequeno erro em onde você está chamando a função, tenta usar esse código aqui ó `startPauseBt.addEventListener('click', iniciarOuPausar)

function iniciarOuPausar() { if(intervaloId){ imgPlayOuPause.setAttribute('src', './imagens/play_arrow.png') pause.play() zerar() return } imgPlayOuPause.setAttribute('src', './imagens/pause.png') play.play() intervaloId = setInterval(contagemRegressiva, 1000) iniciarOuPausarBt.textContent = "Pausar" }

function zerar() { clearInterval(intervaloId) iniciarOuPausarBt.textContent = "Começar" intervaloId = null }`

no meu funcionou, qualquer coisa só mandar uma msg que respondo hehe.

solução!

Obrigado pela ajuda eu encontrei o meu erro, foi na tag da 'const iniciarouPausarBt = document.querySelector('#start-pause')' o correto era const iniciarouPausarBt = document.querySelector('#start-pause span')