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

Duvida sobre inputs

Como que eu faço para dois ou mais botões funcionarem via input? O codigo abaixo nao funciona... obrigado

<meta charset="UTF-8">
<html>

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

<script>
    var segredo = 5;
    var inserir = document.querySelector("input"); //pega do mundo html a tag input e joga na variável 'inserir'
    //entre áspas deverá ser a mesma nomenclatura do mundo html (input/)
    //input.value;

    function verifica(){

    if(inserir.value == segredo) {
        alert("Voce acertou!");
    } else {
        alert("Voce errou!");
    }
        inserir.value = ""; //limpar campos
        inserir.focus(); //voltar na caixa de digitar
  }

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

</script>

<br>
<input>
<button>Testar o segundo botão</button>

<script>
    var teste = 3;
    var digitar = document.querySelector("input"); //pega do mundo html a tag input e joga na variável 'digitar'
    //entre áspas deverá ser a mesma nomenclatura do mundo html (input/)
    //input.value;

    function identificar(){

    if(digitar.value == teste) {
        alert("Voce acertou!");
    } else {
        alert("Voce errou!");
    }
        digitar.value = ""; //limpar campos
        digitar.focus(); //voltar na caixa de digitar
  }

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

</script>

</html>
4 respostas

Você precisa declarar seu código javascript após o html.

Olá Alberto!

Não entendi. Meu código já está declarado da forma como você instruiu ;/

Me corrige se eu estiver errado..

solução!

Oi Brunoo, tudo bom ? Seguinte pelo que eu entendi você quer duas coisas ter dois segredos diferentes o 5 e o 3 certo? aí você quer quer checar se você acertou o segredo em dois botões diferentes, ok. Isso é possível, só que você não precisa fazer dois scripts diferentes pra isso, você poderia fazer assim:

<meta charset="UTF-8">
<html>

<input>
<br>
<button id="primeiro-botao">Compare com o meu primeiro segredo</button>
<br>
<button id="segundo-botao">Compare com o meu segundo segredo</button>
<br>
<script>
    var primeiroSegredo = 5;
    var segundoSegredo = 3;
    var campo = document.querySelector("input");

    function verificaPrimeiroSegredo(){

        if(campo.value == primeiroSegredo) {
            alert("Voce acertou o primeiro segredo!");
        }else{
            alert("Voce errou o primeiro segredo!");
        }
        campo.value = ""; //limpar campos
        campo.focus(); //voltar na caixa de digitar
    }

    function verificaSegundoSegredo(){
        if(campo.value == segundoSegredo) {
            alert("Voce acertou o segundo segredo!");
        } else {
            alert("Voce errou o segundo segredo!");
        }

            campo.value = ""; //limpar campos
            campo.focus(); //voltar na caixa de digitar
    }

    var primeiroBotao = document.getElementById("primeiro-botao");
    primeiroBotao.onclick = verificaPrimeiroSegredo;

    var segundoBotao = document.getElementById("segundo-botao");
    segundoBotao.onclick = verificaSegundoSegredo;

</script>
</html>

Como nesse caso eu estou utilizando apenas um input eu utilizo o querySelector("input") e como eu tenho dois botões cada um para checar um segredo diferente eu coloquei um id (identificador único) para que eu possa associar os botões com o getElementById como tenho dois botões quando eu faço document.querySelector("button"); a qual dos dois botões estou me referenciando ? (Ambos tem a tag button) por isso utilizei um id na tag para poder referenciar cada um dos botões, assim eu poderia ter quantos botões fossem necessários, essa é apenas um forma de resolver essa questão. Espero ter ajudado

Perfeito!

Thanks!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software