Entrar Ainda não tem acesso?
1
resposta

Jogo Adivinha mais - Foco no botão

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Interaja de maneira diferente com o usuário e atividade Consolidando seu conhecimento

por Antonio Sergio de Souza Muniz
| 149.5k xp | 19 posts
Consultor

Pessoal, Queria melhorar o jogo, ao invés do foco no campo, gostaria de colocar o foco no botão, caso o resultado esteja errado. Uma ajuda com a instrução que faz isso!!! Abraço a todos. Abaixo o código:

<meta charset="UTF-8">

<input/>
<button>Compare com o meu segredo</button>

<script>
    var segredo = Math.round(Math.random() * 10);

    var input = document.querySelector("input");
    input.focus();

    function verifica() {
        if(input.value == segredo) {
        alert("Você acertou!!");

        } else {

           alert("Você errou!!!");
        }
        input.value = "";
        input.focus();
    }

    var button = document.querySelector("button");
    button.onclick = verifica;



</script>
1 resposta
por Renan Cezar Wuicik
| 3167.3k xp | 6165 posts
Instrutor Suporte Educacional Start By Alura

Olá Antonio, tudo bem por aí?

Gostaria de pedir desculpas pela demora em obter um retorno aqui no fórum!

Para dar foco no botão no momento desse curso não tem como, pois nesse curso o professor não ensina há fazer isso, mas mais pra frente esse tipo de coisa vai ser trabalhada pelos instrutores, mas vou te mostrar como isso pode ser feito agora abaixo:

Para você colocar o foco em um botão assim que a pagina carrega você irá precisar usar esse parâmetro:

<button type="button" autofocus>
   Compare com o meu segredo
</button>

E depois remover esse claro:

<button>Compare com o meu segredo</button>

Usando a tag <button type="button" autofocus> ele vai gerar foco imediato no botão, e colocar o foco nele de imediato;

Contudo para ele funcionar você precisa remover o imput.focus(); do código na seguinte parte:

var input = document.querySelector("input");
    input.focus();

Caso faça isso o botão terá foco já ao carregar a página, e caso deseje aprender mais sobre isso vou deixar um artigo que ensina isso e tem exemplos práticos do que eu mostrei:

Botão Com Autofoco Em HTML

Creio que seja isso, caso tenha mais dúvidas recorra ao fórum novamente!

E PARABÉNS pelo código ele está muito bom e funcionando certinho, continue com esse empenho maravilhoso pois assim você vai longe!

Um grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solução! ✓.