Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

11 Faça como eu fiz: alterando o status do botão

Comentários:
Durante este exercício de transcrição do vídeo em código, cometi um erro de digitação que, apesar de simples, me custou um bom tempo para identificar: utilizei apenas um underscore _ ao invés de dois __ nas classes CSS (por exemplo, container_botao em vez de container__botao).
Esse tipo de erro pode passar despercebido facilmente devido ao tema escuro do VSCode, à falta de experiência ou simplesmente por desatenção. Como não conseguia identificar o problema busquei outras alternativas. (Apesar de não fazer sentido pois não as estavam na aula). Enfim, implementei algumas soluções alternativas, incluindo o uso dos métodos setAttribute('disabled', 'true') e removeAttribute('disabled') para garantir que o botão fosse desabilitado funcionalmente, além da mudança visual.
Ao final do script, após revisar novamente o código em um outro dia durante o dia, percebi o erro de digitação. Mesmo assim, decidi manter as implementações adicionais, pois tornam o código mais robusto. Segue abaixo o código final com essas melhorias:

function alterarStatusBotao() { /* Função para alterar o status do botão de reiniciar */
  let botao = document.getElementById('btn-reiniciar');
  console.log('Botao encontrado:', botao); /* Verifica se o botão foi encontrado */
  console.log('Classes atuais do botão:', botao.classList); /* Verifica as classes atuais do botão */

  if (botao.classList.contains('container__botao-desabilitado')) {

    botao.classList.remove('container__botao-desabilitado');
    botao.classList.add('container__botao');
    botao.removeAttribute('disabled'); /* Remove o atributo 'disabled' para habilitar botão */
   } else {
    botao.classList.remove('container_botao');
    botao.classList.add('container__botao-desabilitado');
    botao.setAttribute('disabled', 'true'); /* Adiciona o atributo 'disabled' para desabilitar botão */
   }
}

function reiniciar(){ /* Função para reiniciar os campos e o resultado */
  document.getElementById('quantidade').value = '';
  document.getElementById('de').value = '';
  document.getElementById('ate').value = '';
  document.getElementById('resultado').innerHTML = '<label class="texto__paragrafo">Números sorteados:  nenhum até agora</label>';
  alterarStatusBotao();
}

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
2 respostas
solução!

Oi, José Antônio! Como vai?

Agradeço por compartilhar.

Gostei da sua explicação sobre o erro com o underscore, é algo que realmente pode passar despercebido. Sua iniciativa de adicionar o setAttribute e o removeAttribute mostra atenção aos detalhes e melhora o comportamento do botão de forma prática.

Continue com essa postura de revisar o código com calma, pequenas pausas ajudam muito na identificação de erros.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Obrigado.