Nesse desafio da Alugame, pedi ajuda para a inteligência artificial (ChatGPT) para entender como alterar o texto de um botão ao clicar nele. No HTML5, percebi que a tag

• (lista) possui o ID "game-1" e, dentro dela, o botão, representado pela tag , está como elemento filho.

Eu tinha dúvidas sobre como acessar o conteúdo "Alugar" dentro dessa tag e alterá-lo para outro texto, mas consegui encontrar a solução com a ajuda do ChatGPT. Ele me mostrou uma propriedade do JavaScript chamada textContent, que permite acessar e alterar o texto dentro de uma tag. Isso foi muito útil!

No entanto, fiquei pensando: existe uma forma melhor de entender declarações, variáveis, propriedades, etc., de modo que, quando eu tiver dúvidas, eu saiba como buscar diretamente na documentação oficial do JavaScript e encontrar uma solução por conta própria?

Embora eu saiba que é importante usar ferramentas como a inteligência artificial, quero, como iniciante na programação, aprender primeiro a lógica por trás dos conceitos para me tornar mais independente antes de depender da IA.

Esse é o meu código pronto:

function alterarStatus(id) {
    let imagem = document.querySelector(`#game-${id} .dashboard__item__img`);
    let botao = document.querySelector(`#game-${id} .dashboard__item__button`);

    if (botao.textContent.trim() === 'Alugar' && imagem.classList.contains('dashboard__item__img')) {
        imagem.classList.toggle('dashboard__item__img--rented');
        botao.textContent = 'Devolver';
        botao.classList.add('dashboard__item__button--return');
    } else {
        imagem.classList.remove('dashboard__item__img--rented');
        imagem.classList.add('dashboard__item__img');
        botao.textContent = 'Alugar';
        botao.classList.remove('dashboard__item__button--return');
    }
}