[Dúvida] Meu código não está correto | Lógica de programação: praticando com desafios

Eu fiz esse código:

var elemento = document.querySelector('.selecao')

console.log(elemento.parentNode)

function alterarStatus(){
    if(elemento.classList.contains('dashboard__item__button')){
        elemento.parentNode.classList.add('dashboard__items__item')
        elemento.classList.add('dashboard__item__button');
        elemento.classList.replace('dashboard__item__button', 'dashboard__item__button--return');
        elemento.textContent = 'Devolver';
    }
}

elemento.addEventListener('click', function(){
    alterarStatus();
});

Mas não funcionou. Pedi ajuda ao GPT para que ele me ajudasse a corrigir o problema, ele me explicou e forneceu essa resposta:

function alterarStatus(num) {
    var elementos = document.querySelectorAll('.dashboard__items__item');
for (var i = 0; i < elementos.length; i++) {
        if (i === num - 1) {
            var elemento = elementos[i];
            var botao = elemento.querySelector('.dashboard__item__button');

            if (botao.classList.contains('selecao')) {
                elemento.classList.add('dashboard__items__item');
                botao.classList.remove('selecao');
                botao.classList.add('dashboard__item__button--return');
                botao.textContent = 'Devolver';
            } else {
                botao.classList.remove('dashboard__item__button--return');
                botao.classList.add('selecao');
                botao.textContent = 'Alugar';
            }
        }
    }
}

Mas, não entendi perfeitamente, poderia me explicar melhor?

Olá, Pedro! Tudo bem com você?

Vamos juntos entender o código que o GPT sugeriu como solução.

O código que você criou inicialmente estava buscando um único elemento com a classe 'selecao' e tentando adicionar ou alterar classes desse elemento e de seu nó pai. No entanto, o projeto AluGames tem vários jogos que podem ser alugados ou devolvidos, então é necessário trabalhar com múltiplos elementos.

A solução proposta pelo GPT começa com a função alterarStatus(num), que recebe um número como argumento. Esse número será usado para identificar qual jogo estamos tentando alugar ou devolver.

function alterarStatus(num) {
    var elementos = document.querySelectorAll('.dashboard__items__item');

Aqui, elementos é uma lista de todos os elementos com a classe 'dashboard__items__item', que representam os jogos.

for (var i = 0; i < elementos.length; i++) {
        if (i === num - 1) {
            var elemento = elementos[i];
            var botao = elemento.querySelector('.dashboard__item__button');

Nessa parte, estamos percorrendo cada jogo na lista elementos. Quando encontramos o jogo que corresponde ao número passado para a função (lembrando que os arrays em JavaScript começam em 0, então subtraímos 1 do número), pegamos o botão correspondente a esse jogo.

if (botao.classList.contains('selecao')) {
                elemento.classList.add('dashboard__items__item');
                botao.classList.remove('selecao');
                botao.classList.add('dashboard__item__button--return');
                botao.textContent = 'Devolver';
            } else {
                botao.classList.remove('dashboard__item__button--return');
                botao.classList.add('selecao');
                botao.textContent = 'Alugar';
            }

E aqui, estamos verificando se o botão do jogo tem a classe 'selecao'. Se tiver, isso significa que o jogo está disponível para alugar. Então, adicionamos a classe 'dashboard__items__item' ao elemento do jogo, removemos a classe 'selecao' do botão, adicionamos a classe 'dashboard__item__button--return' ao botão e mudamos o texto do botão para 'Devolver'. Se o botão não tiver a classe 'selecao', isso significa que o jogo está alugado.

Por fim, removemos a classe 'dashboard__item__button--return' do botão, adicionamos a classe 'selecao' ao botão e mudamos o texto do botão para 'Alugar'.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

PRORROGAMOS O DESCONTO!