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');
}
}