Entrar Ainda não tem acesso?
1
resposta

Usar a propriedade .src ou setAttribute?

Referente ao curso JavaScript: manipulando elementos no DOM, no capítulo Finalizando o projeto e atividade Faça como eu fiz: formatando botão dinâmico e temporizador

por Estudante
| 106.4k xp | 76 posts

Antes de ver a resolução do professor eu utilizei a propriedade .src para alterar a img que se encontra no span do botão 'começar'. Minha dúvida é, tem algum problema fazer assim? em termos de boas práticas ou eficiência do código?

//Selecionando a img de play/pause do botão começar
const botaoIniciarImg = document.querySelector('.app__card-primary-butto-icon')

//alterando o source das imagens na função
function iniciarEPausar() {
    if(intervaloId){
        audioPausa.play();
        zerar();    
        return
    }
    audioPlay.play(); 
    intervaloId = setInterval(contagemRegressiva, 1000)
    botaoIniciarPausar.textContent = 'Pausar';
    botaoIniciarImg.src = './imagens/pause.png'
}

function zerar() {
    clearInterval(intervaloId);
    intervaloId = null;
    botaoIniciarPausar.textContent = 'Começar';
    botaoIniciarImg.src = './imagens/play_arrow.png'
}
1 resposta
por Luan Alves
| 427.6k xp | 555 posts
Monitor em Desenvolvimento Front-End

Olá! A sua dúvida é bastante pertinente e mostra que você está atento aos detalhes do código.

No seu caso, você utilizou a propriedade .src para alterar a imagem do botão, e isso está absolutamente correto. A propriedade .src é uma maneira direta de alterar o atributo src de um elemento img.

A razão pela qual o método setAttribute é frequentemente utilizado é por sua versatilidade. Ele pode ser usado para definir qualquer atributo de um elemento, não apenas o src. Por exemplo, você poderia usar setAttribute para alterar a classe de um elemento, o estilo, entre outros.

Em termos de eficiência, a diferença entre os dois é mínima e não deve afetar o desempenho do seu código. Em termos de boas práticas, ambas as abordagens são aceitáveis. A escolha entre uma ou outra muitas vezes depende da situação específica e da preferência do desenvolvedor.

Portanto, a maneira como você implementou a alteração da imagem está correta e não há problema em continuar usando a propriedade .src.

Espero ter ajudado e bons estudos!