Testei algumas declarações de teste e gostaria de entender porque deram errado. | Lógica de programação: praticando com desafios

1 - Por que os nomes dos jogos não aparecem no alert usando a seguinte declaração:

function alterarStatus(id) {
      let nomeDoJogo  = document.querySelector(`game-${id} .dashboard__item__name`);
      alert(nomeDoJogo);

2 - Por que a seguinte declaração NÃO dá certo:

if  (imagemDoJogo.classList.contains('dashboard__item__img')) {
        imagemDoJogo.classList.remove('dashboard__item__img');
        imagemDoJogo.classList.add('dashboard__item__img--rented');
    } else {
        imagemDoJogo.classList.add('dashboard__item__img');

E essa essa dá:

if  (imagemDoJogo.classList.contains('dashboard__item__img--rented')) {
        imagemDoJogo.classList.remove('dashboard__item__img--rented');
        imagemDoJogo.classList.add('dashboard__item__img');
    } else {
        imagemDoJogo.classList.add('dashboard__item__img--rented');

3 - Poderiam me explicar como ficariam as declarações se ao invés de usarmos if (botaoDoJogo.classList.contains('dashboard__item__button--return')) , usarmos if (botaoDoJogo.classList.contains('dashboard__item__button')).

Olá, Amanda!

Vamos tentar entender o que pode estar acontecendo com seus códigos:

Problema com alert e nomes dos jogos:

Quando você usa document.querySelector para selecionar um elemento, ele retorna o próprio elemento e não o conteúdo dele. Para obter o texto dentro do elemento, você precisa acessar a propriedade .textContent ou .innerText. Portanto, seu código ficaria assim:
```
function alterarStatus(id) {
    let nomeDoJogo = document.querySelector(`game-${id} .dashboard__item__name`).textContent;
    alert(nomeDoJogo);
}
```
Isso deve fazer com que o nome do jogo apareça no alert.
Diferença entre as duas declarações if:

A diferença entre as duas condições if que você mencionou está na classe que está sendo verificada. No primeiro caso, você verifica se a imagem contém a classe 'dashboard__item__img', enquanto no segundo caso, verifica se contém 'dashboard__item__img--rented'.

A lógica por trás disso é que você está alternando entre duas classes, dependendo do estado atual da imagem (se está alugada ou não). No primeiro caso, você está removendo a classe padrão e adicionando a classe de "alugada". No segundo caso, faz o oposto. O que pode ter dado errado é que, inicialmente, a imagem pode não ter a classe 'dashboard__item__img', o que faria com que o bloco else fosse executado. Verifique se as classes estão sendo atribuídas corretamente no HTML inicial.
Alteração na condição if para botaoDoJogo:

Se você alterar a condição if para verificar a classe 'dashboard__item__button' em vez de 'dashboard__item__button--return', a lógica do seu código mudará. A classe 'dashboard__item__button' provavelmente é uma classe base que todos os botões têm, enquanto 'dashboard__item__button--return' indica um estado específico (como "devolver").

Se você fizer essa mudança, precisará ajustar a lógica para garantir que está verificando e alterando o estado correto do botão. Por exemplo:
```
if (botaoDoJogo.classList.contains('dashboard__item__button--return')) {
    // Código para quando o botão está no estado "devolver"
} else {
    // Código para quando o botão está no estado "alugar"
}
```
Ao mudar para 'dashboard__item__button', você precisa garantir que ainda está distinguindo entre os estados "alugar" e "devolver".

Espero ter ajudado e bons estudos!