1
resposta

[Sugestão] Resolução

Compartilhando meu raciocínio do desafio. 1º: coloquei id para cada botão, chamando os botões de 1 a 3.

<ul class="dashboard__items"> <li class="dashboard__items__item" id="game-1"> <div class="dashboard__item__img"> <img src="img/monopoly.png" alt="Capa jogo Monopoly"> </div> <p class="dashboard__item__name">Monopoly</p> <a onclick="onClickBotao1()" id="botao1" href="#" class="dashboard__item__button ">Alugar</a> </li> <li class="dashboard__items__item" id="game-2"> <div class="dashboard__item__img"> <img src="img/ticket_to_ride.png" alt="Capa jogo Ticket to Ride"> </div> <p class="dashboard__item__name">Ticket to Ride</p> <a onclick="onClickBotao2()" id="botao2" href="#" class="dashboard__item__button">Alugar</a> </li> <li class="dashboard__items__item" id="game-3"> <div class="dashboard__item__img dashboard__item__img--rented"> <img src="img/takenoko.png" alt="Capa jogo Takenoko"> </div> <p class="dashboard__item__name">Takenoko</p> <a onclick="onClickBotao3()" id="botao3" href="#" class="dashboard__item__button dashboard__item__button--return">Devolver</a> </li>

2°: criei a função onclick e testei no console.log, para ter certeza que estava chamando os botões corretamente.

3º: Apanhei bastante para entender que precisa dar dois classList.remove para habilitar o botão.


// Botão Monopoly
let idBotao = '';


// On click botão - Monopoly
function onClickBotao1() {
    idBotao = 'botao1';

    alteraStatusBotao(idBotao);      
}

// On click botão - Ticket to Ride
function onClickBotao2() {
    
    idBotao = 'botao2';
    alteraStatusBotao(idBotao);      
}

// On click botão - takenoko
function onClickBotao3() {
    
    idBotao = 'botao3';
    alteraStatusBotao(idBotao);      
}


function alteraStatusBotao(idBotao) {
    let botao = document.getElementById(idBotao); // Busca dados do botão
    
    // botão habilitado?
    if (botao.classList.contains('dashboard__item__button')){
        botao.classList.remove('dashboard__item__button');  
        botao.innerHTML = `<a class="dashboard__item__button dashboard__item__button--return">Devolver</a>`;  
    } else{
        botao.classList.remove('dashboard__item__button');
        botao.classList.remove('dashboard__item__button--return');
        botao.innerHTML = `<a >Alugar</a>`;
        botao.classList.add('dashboard__item__button');

    }

}

1 resposta

Olá Cristin! Tudo bem?

Que legal que você compartilhou seu raciocínio para o desafio do projeto AluGames!

No mais, se precisar de ajuda ou tiver alguma dúvida relacionada aos seus estudos, o fórum é o melhor lugar para te ajudar.

Bons estudos!