Fiz uma primeira versão que funcionou mas pensando em reutilização não estava muito legal. Dando uma olhada na solução dos instrutores do vídeo consegui melhorar meu código nessa linha. Qualquer dica sobre o assunto será muito bem vinda. Segue meu código com foco no desacomplamento. Versão - 1 (Não havia visto a opacidade da imagem na div)
function alterarStatus(numeroProduto) {
switch (numeroProduto) {
case 1:
alterarButton("game-1");
break;
case 2:
alterarButton("game-2");
break;
case 3:
alterarButton("game-3");
break;
}
}
function alterarButton(idElement) {
let itemListaJogos = document.getElementById(idElement);
itemListaJogos.childNodes.forEach((elemento) => {
let list = elemento.nextSibling?.classList;
let nodeName = elemento?.nextSibling?.localName;
if (nodeName == "a") {
list.toggle("dashboard__item__button--return");
alterarTextoBotão(elemento, list);
}
});
}
function alterarTextoBotão(elemento, list) {
list.forEach((item) => {
if (item === "dashboard__item__button--return") {
elemento.nextSibling.innerHTML = "Devolver";
} else {
elemento.nextSibling.innerHTML = "Alugar";
}
});
}
Versão 2 (Final)
function alterarStatus(id) {
let li = document.getElementById(`game-${id}`);
let botao = li.querySelector("a");
alterarEstilo(li);
alterarTextoBotão(botao);
}
function alterarEstilo(elemento) {
let div = elemento.querySelector(".dashboard__item__img");
let botao = elemento.querySelector("a");
let listbotao = botao.classList;
let listDiv = div.classList;
listbotao.toggle("dashboard__item__button--return");
listDiv.toggle("dashboard__item__img--rented");
}
function alterarTextoBotão(elemento) {
elemento.classList;
if (elemento.classList.contains("dashboard__item__button--return")) {
elemento.innerHTML = "Devolver";
} else {
elemento.innerHTML = "Alugar";
}
}