click

Olá Nathalia!

O código apresentado possui alguns problemas que impactam seu funcionamento correto. Os principais erros estão relacionados à lógica de atribuição e verificação das cores de fundo dos elementos HTML.

Inicialmente, é importante destacar que o operador de atribuição (=) está sendo utilizado erroneamente nos condicionais if e else if. Em vez disso, deveriam ser usados operadores de comparação, como === ou ==, para verificar se os valores das variáveis são iguais.

Mas pensando em uma forma de facilitar a manutenção do seu código, eu pensei em outro modelo, que facilita bastante:

Primeiramente vamos adicionar uma classe chamada "marcado", ou o nome que preferir é claro só lembra de alterar depois caso queira seguir com esse código, a classe fica assim:

.marcado{
  background-color:  #f2f2f2;
}

Depois no seu JavaScript, vamos utilizar a seguinte lógica, que é simples e requer um certo conhecimento de JavaScript e de manipulação. A ideia é que, ao clicar no botão, ele receba uma classe(marcado) que transforma o seu background-color em cinza, ou em qualquer outra cor desejada. Quando clicado novamente, caso essa classe esteja ativa, a classe é desativada. No entanto, ela só pode ser desativada se a classe existir no local que foi clicado, ou seja, no número.

Portanto seu código JS ficou assim:

const dia = document.querySelectorAll('.dia');

dia.forEach(dias => {
    dias.addEventListener('click', function(){
        if (this.classList.contains('marcado')) { 
            this.classList.remove("marcado");
        } else {
            this.classList.add("marcado");
        }
    })
});

Nesse código, a propriedade classList é utilizada para acessar e manipular as classes associadas a um elemento HTML. Isso permite adicionar, remover e verificar se uma classe específica está presente. O método contains('marcado') é parte dessa funcionalidade e serve para verificar se a classe 'marcado' está presente no elemento atual. Se essa classe estiver presente, isso indica que o elemento provavelmente já possui alguma marcação especial. Caso contrário, significa que ainda não foi marcado. Essa verificação é fundamental para determinar o comportamento a ser executado, permitindo que a página web responda dinamicamente às interações do usuário.

Espero que tenha entendido com base nessa explicação, o seu projeto ficou assim(eu alterei a cor do fundo e do texto, para visualizar melhor):

Com esse código o projeto tem maior liberdade para ser customizado, espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!