Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] O botão reiniciar está alterando o estilo quando fica habilitado

Como descrevi no título, o botão reiniciar está perdendo toda a formatação quando clico no botão sortear alterando cor, fonte e tamanho, ficando apenas um quadrado pequeno enquanto o botão sortear está expandindo na horizontal. Minha dúvida é, isso é um desafio implícito ou eu fiz algo errado no CSS, não lembro de ter alterado nada no CSS.

Abaixo o CSS e JavaScript;

Java Script;

function sortear() { let quantidade = parseInt(document.getElementById('quantidade').value); let de = parseInt(document.getElementById('de').value); let ate = parseInt(document.getElementById('ate').value);

let sorteados = [];
let numero;

for (let i = 0; i < quantidade; i++) {
    numero = obterNumeroAleatorio(de, ate);

    while(sorteados.includes(numero)) {
        numero = obterNumeroAleatorio(de, ate);
    }

    sorteados.push(numero);
}

let resultado = document.getElementById('resultado');
resultado.innerHTML = `<label class="texto__paragrafo">Números sorteados: ${sorteados}</label>`;
alterarStatusBotao();

}

function obterNumeroAleatorio(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

function alterarStatusBotao() { let botao = document.getElementById('btn-reiniciar');

if (botao.classList.contains('container__botao-desabilitado')) {
    botao.classList.remove('container__botao-desabilitado');
    botao.classList.add('container-botao');

} else {
    botao.classList.remove('container-botao');
    botao.classList.add('container__botao-desabilitado');
}

}

function reiniciar() { 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();}

CSS;

  • { box-sizing: border-box; margin: 0; padding: 0; color: white; }

body { background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%); height: 100vh; display: flex; align-items: center; justify-content: center; }

body::before { background-image: url("img/code.png"); background-repeat: no-repeat; background-position: right; content: ""; display: block; position: absolute; width: 100%; height: 100%; opacity: 0.4; }

.container { width: 80%; min-height: 50vh; display: flex; align-items: center; justify-content: space-between; border-radius: 24px; border: 1px solid #1875E8; box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15); background-image: url("img/Ruido.png"); background-size: 100% 100%; position: relative; overflow: hidden; }

.container__conteudo { display: flex; align-items: center; position: relative; width: 100%; }

.container__informacoes { flex: 1; padding: 3rem; }

.container__texto { margin: 12px 0; display: flex; flex-direction: column; }

.container__texto-azul { color: #1875E8; display: block;

}

.container__campo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.container__input { width: 130px; height: 72px; border-radius: 16px; background-color: #FFF; border: none; color: #1875E8; padding: 2rem; font-size: 24px; font-weight: 700; font-family: 'Inter', sans-serif; }

.container__botoes { display: flex; flex-direction: row; gap: 1em; }

.container__botao { border-radius: 16px; background: #1875E8; /* Azul */ padding: 16px 24px; font-size: 24px; width: 100%; font-weight: 700; border: none; cursor: pointer; }

.container__botao-desabilitado { border-radius: 16px; background: #6f6f70; padding: 16px 24px; font-size: 24px; width: 100%; font-weight: 700; border: none; cursor: not-allowed; }

h1 { font-family: 'Chakra Petch', sans-serif; font-size: 72px; font-style: normal; font-weight: 700; line-height: 100%; padding: 2rem; }

.texto__paragrafo { color: #FFF; font-family: 'Inter'; font-size: 32px; font-style: normal; font-weight: 400; line-height: normal; }

.container__imagem-pessoa { max-width: 100%; height: auto; margin-top: 2rem; }

button:disabled { background-color: gray; }

@media screen and (max-width: 1250px) { .container__imagem-pessoa { display: none; }

h1 {
    font-size: 50px;
}

}

Já tentei encontrar o erro com a Luri, mas não consegui, utilizei outra ferramentas de IA porém, com nenhuma delas eu conseguiu resolver.

1 resposta
solução!

Oi Gabriel,

Analisando seu código, o problema está na lógica da função alterarStatusBotao.

Você está alternando as classes do botão, o que faz com que ele perca a formatação original.

O correto seria manter a classe base do botão e apenas adicionar ou remover a classe que controla o estado de desabilitado.

Para corrigir, sugiro que você faça as seguintes alterações no seu código JavaScript:

function alterarStatusBotao() {
  let botao = document.getElementById('btn-reiniciar');

  if (botao.classList.contains('container__botao-desabilitado')) {
    botao.classList.remove('container__botao-desabilitado');
    botao.disabled = false; // Habilita o botão
  } else {
    botao.classList.add('container__botao-desabilitado');
    botao.disabled = true; // Desabilita o botão
  }
}

E no seu CSS, adicione a seguinte regra para o botão desabilitado:

.container__botao-desabilitado {
  background: #6f6f70;
  cursor: not-allowed;
}

Com essas mudanças, o botão "Reiniciar" manterá sua formatação original e apenas mudará a cor e o cursor quando estiver desabilitado. 🤔

🎓 Para saber mais: Documentação sobre manipulação de classes CSS com JavaScript

Espero que isso resolva seu problema! 🧐

Continue praticando e explorando a programação.

📌 Nota: Otimize seus estudos com o guia "Como turbinar seus estudos utilizando o fórum" e insira o código usando a ferramenta do fórum. como inserir bloco de código

tux matrix Caso este post o tenha ajudado, marque-o como solucionado ☑️. Bons Estudos! 🤓