[AluGames] Troca de imagem/texto do botão só funciona um por vez

Olá Felipe! Boa tarde!

Entendi a sua dificuldade em fazer a troca de imagem/texto do botão funcionar corretamente no seu projeto AluGames. Vou te ajudar a resolver esse problema!

Pelo que pude analisar no seu código, você está utilizando duas condições separadas para verificar o status do botão e realizar a troca de imagem/texto. No entanto, essas condições estão sendo avaliadas de forma independente, o que está causando o problema.

Uma solução para esse caso é utilizar uma estrutura de decisão if-else-if. Dessa forma, você pode verificar todas as possibilidades e garantir que apenas uma delas seja executada.

Veja como ficaria o código com essa alteração:

function alterarStatus(id){
    let gameClicado = document.getElementById('game-' + id);
    let status = gameClicado.querySelector('.dashboard__item__img');
    let botao = gameClicado.querySelector('.dashboard__item__button');
       
    if(status.classList.contains('dashboard__item__img') && botao.classList.contains('dashboard__item__button')){
        status.setAttribute('class' , 'dashboard__item__img dashboard__item__img--rented') 
        botao.setAttribute('class' , 'dashboard__item__button dashboard__item__button--return')
        exibirTextoNaTela(id , 'a' , 'Devolver');

    } else if (status.classList.contains('dashboard__item__img--rented') && botao.classList.contains('dashboard__item__button--return')){
        status.setAttribute('class' , 'dashboard__item__img') 
        botao.setAttribute('class' , 'dashboard__item__button')
        exibirTextoNaTela(id , 'a' , 'Alugar');
    }
}

Com essa alteração, o código irá verificar primeiro se o status é "Alugar" e o botão é "Alugar". Se for verdadeiro, ele irá trocar para "Devolver". Caso contrário, irá verificar se o status é "Devolver" e o botão é "Devolver". Se for verdadeiro, irá trocar para "Alugar". Dessa forma, você garante que apenas uma das condições será executada.

Espero que essa solução resolva o seu problema! Se tiver mais alguma dúvida, é só me dizer.

Oi,Rodrigo!

Muito obrigado pela resposta!

Eu testei aqui e não funcionou :( Com o código que tu me passou ele troca de 'Alugar' pra 'Devolver', mas não o contrário.

Uma coisa que eu notei que não mencionei acima, mas acho que não afeta essa parte, é a função 'exibirTextoNaTela(id, tag, texto)' que tô usando pra trocar o texto de um pro outro. (Acredito que não afete porque ela já funcionou pros dois cenários individualmente).

function exibirTextoNaTela(id, tag, texto) {
    let gameClicado = document.getElementById('game-' + id);
    let textoBotao = gameClicado.querySelector(tag);
    textoBotao.innerHTML = texto  
}

Fora essa função, meu código é agora idêntico ao teu mas ainda assim não funciona corretamente. Mais alguma coisa que eu poderia mudar?

Muito obrigado! Felipe

Agora que vi que tem um erro na sua lógica, no primeiro if:

if(status.classList.contains('dashboard__item__img') && botao.classList.contains('dashboard__item__button'))

Esse if verifica se o elemento tem a classe dashboard__item__img e se o botão tem a classe dashboard__item__button. Isso sempre vai dar verdadeiro, pois ambos os itens (alugados e disponíveis) possuem essa classe. Essas classes são fixas e sempre estarão nos elementos, independente se eles estão alugados ou disponíveis.

A lógica deveria ser baseada na classe dashboard__item__img--rented e na dashboard__item__button--return, pois elas é que vão variar.

O código correto deveria ser:

function alterarStatus(id){
    let gameClicado = document.getElementById('game-' + id);
    let status = gameClicado.querySelector('.dashboard__item__img');
    let botao = gameClicado.querySelector('.dashboard__item__button');
       
    if(!status.classList.contains('dashboard__item__img--rented') && !botao.classList.contains('dashboard__item__button--return')){
        status.setAttribute('class' , 'dashboard__item__img dashboard__item__img--rented') 
        botao.setAttribute('class' , 'dashboard__item__button dashboard__item__button--return')
        exibirTextoNaTela(id , 'a' , 'Devolver');

    } else if (status.classList.contains('dashboard__item__img--rented') && botao.classList.contains('dashboard__item__button--return')){
        status.setAttribute('class' , 'dashboard__item__img') 
        botao.setAttribute('class' , 'dashboard__item__button')
        exibirTextoNaTela(id , 'a' , 'Alugar');
    }
}

function exibirTextoNaTela(id, tag, texto) {
    let gameClicado = document.getElementById('game-' + id);
    let textoBotao = gameClicado.querySelector(tag);
    textoBotao.innerHTML = texto  
}

Muito obrigado, Rodrigo!