Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Alugames - minha solução

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Sorteador de números e atividade alteração

por Leonardo Fernandes Peres
| 33.7k xp | 3 posts
Estagiário

Estou tentando realizar dessa forma, porém ao clicar no botão 2 ou 3, ele muda a cor do botão corretamente mas muda a escrita somente do botão 1, não consegui entender onde está o erro no código, tentei colocar mais uma condicional pra caso de evitar o event do primeiro botão. 

let handleButton1 = document.getElementById('game-1').addEventListener("click", alterarStatus)
let handleButton2 = document.getElementById('game-2').addEventListener("click", alterarStatus)
let handleButton3 = document.getElementById('game-3').addEventListener("click", alterarStatus)

function exibirTextoNaTela(tag, texto){
  let campo = document.querySelector(tag);
  campo.innerHTML = texto;
}

function alterarStatus(event){
  
    if(event.target.classList.contains('dashboard__item__button--return')){
      event.target.classList.remove('dashboard__item__button--return')
      exibirTextoNaTela('a', 'Alugar')
    } else {
        event.target.classList.add('dashboard__item__button--return')
        exibirTextoNaTela('a', 'Devolver')
    }
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!
por Armano Barros Alves Junior
| 2273k xp | 4691 posts
Alura Scuba Team Monitor | Suporte Educacional

Olá, Leonardo! Como vai?

Quando você usa document.querySelector('a'), está selecionando o primeiro link <a> que aparece no documento, o que provavelmente é o botão do primeiro jogo. Para corrigir isso, você precisa garantir que está alterando o texto do botão que foi clicado.

Uma maneira de fazer isso é passar o próprio botão como argumento para a função exibirTextoNaTela. Aqui está uma sugestão de como você pode ajustar o código:

function exibirTextoNaTela(botao, texto){
  botao.innerHTML = texto;
}

function alterarStatus(event){
    let botao = event.target;
    if(botao.classList.contains('dashboard__item__button--return')){
      botao.classList.remove('dashboard__item__button--return')
      exibirTextoNaTela(botao, 'Alugar')
    } else {
        botao.classList.add('dashboard__item__button--return')
        exibirTextoNaTela(botao, 'Devolver')
    }
}

Com essa mudança, você está passando o elemento do botão que foi clicado diretamente para a função exibirTextoNaTela, e então alterando o HTML desse elemento específico, em vez de procurar por um seletor no documento inteiro.

Tente fazer essa alteração e veja se resolve o problema. Espero que isso ajude a corrigir o bug que você está enfrentando. Bons estudos!

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