Foto de Fellipe C.
Fellipe há 1 ano
Enviada pelo
Site

Código para gerar um alerta após input em um form

Estou com uma duvida, do por que não aparece o resultado no alert neste codigo abaixo:

Mesmo que eu tenha declarado as variaveis xx e yy nao retorna o valor no alert.

Estou usando o VScode.

<body>

    <form  method="get">
    <!--Numeros-->
    X: <input type="number" id="x" placeholder="Digite o 1º numero" required  /> <br/>
    Y: <input type="number" id="y" placeholder="Digite o 2º numero" required  /> <br/>
       
    <!--Operador: <input type="text" id="operador" placeholder="Digite: + ou - ou * ou /"  /> <br/>-->
    </form>

    <button onclick="myfunc()">Calcular</button>
    <inputtype="button"value="Atualizar"onClick="window.location.reload()">

</body>
     
    <script type="text/javascript">

    var resultadofinal = soma(xx, yy);
    var xx = document.getElementById("x").value;
    var yy = document.getElementById("y").value;

    function soma(){
        var xx = document.getElementById("x").value;
        var yy = document.getElementById("y").value;
        return xx + yy;
        }
       
       
        //Funcao para mostrar o valor do input
        function myfunc(){
            //var num1 = parseInt(document.getElementById("num1").value) || null;
            alert('Resultado é: ' + resultadofinal);
        }

        // Evento que é executado toda vez que uma tecla for pressionada no input
        document.getElementById("y").onkeypress = function(e) {
        // 13 é a tecla <ENTER>. Se ela for pressionada, mostrar o valor
        if (e.keyCode == 13) {
            myfunc();
            e.preventDefault();
        }
    }
                 
    </script>
2 respostas
Professor João C.
Identidade verificada
  • CPF verificado
  • E-mail verificado
Respondeu há 1 ano
Contatar João

No seu código, você está tentando calcular a soma dos valores xx e yy antes de atribuir os valores dos campos de entrada às variáveis. Como resultado, as variáveis xx e yy estão vazias quando a função soma() é chamada, o que resulta em um resultado vazio ou NaN (Not a Number).

Para corrigir isso, você precisa mover as linhas que atribuem os valores dos campos de entrada para as variáveis xx e yy para antes de chamar a função soma() e calcular o resultado final. Aqui está o código corrigido:

 

<body>
    <form method="get">
        <!-- Numeros -->
        X: <input type="number" id="x" placeholder="Digite o 1º numero" required /><br/>
        Y: <input type="number" id="y" placeholder="Digite o 2º numero" required /><br/>
    </form>

    <button onclick="myfunc()">Calcular</button>
    <input type="button" value="Atualizar" onClick="window.location.reload()">

    <script type="text/javascript">
        function soma() {
            var xx = document.getElementById("x").value;
            var yy = document.getElementById("y").value;
            return parseFloat(xx) + parseFloat(yy);
        }

        function myfunc() {
            var resultadofinal = soma();
            alert('Resultado é: ' + resultadofinal);
        }

        // Evento que é executado toda vez que uma tecla for pressionada no input
        document.getElementById("y").onkeypress = function(e) {
            // 13 é a tecla <ENTER>. Se ela for pressionada, mostrar o valor
            if (e.keyCode == 13) {
                myfunc();
                e.preventDefault();
            }
        }
    </script

 

Nessa versão corrigida do código, primeiro as variáveis xx e yy são atribuídas aos valores dos campos de entrada. Em seguida, a função soma() é chamada para calcular o resultado final. Finalmente, o resultado é exibido em um alerta quando o botão "Calcular" é clicado ou a tecla Enter é pressionada. Certifique-se de converter os valores de entrada para números usando parseFloat() para que a soma seja calculada corretamente.

Um professor já respondeu

Envie você também uma dúvida grátis
Ver resposta
Envie uma dúvida grátis
Resposta na hora da Minerva IA e de professores particulares
Enviar dúvida
Professor Hugo L.
Identidade verificada
  • CPF verificado
  • E-mail verificado
Respondeu há 1 ano
Contatar Hugo Rafael

Parece que o problema no seu código está relacionado ao momento em que você está calculando o resultado da soma e pegando os valores dos campos de entrada (xx e yy). No momento em que você está calculando o resultado final, as variáveis xx e yy ainda não têm os valores dos campos de entrada, então o resultado final não é calculado corretamente.

Aqui está uma versão corrigida do seu código:

<body>
    <form method="get">
        <!--Numeros-->
        X: <input type="number" id="x" placeholder="Digite o 1º numero" required /><br />
        Y: <input type="number" id="y" placeholder="Digite o 2º numero" required /><br />
    </form>

    <button onclick="myfunc()">Calcular</button>
    <input type="button" value="Atualizar" onClick="window.location.reload()">
    
    <script type="text/javascript">
        // Funcao para realizar a soma dos valores
        function soma(x, y) {
            return x + y;
        }

        // Funcao para mostrar o valor do input
        function myfunc() {
            var xx = parseInt(document.getElementById("x").value);
            var yy = parseInt(document.getElementById("y").value);
            var resultadofinal = soma(xx, yy);
            alert('Resultado é: ' + resultadofinal);
        }

        // Evento que é executado toda vez que uma tecla for pressionada no input
        document.getElementById("y").onkeypress = function(e) {
            // 13 é a tecla <ENTER>. Se ela for pressionada, mostrar o valor
            if (e.keyCode == 13) {
                myfunc();
                e.preventDefault();
            }
        }
    </script>
</body>

Nesta versão corrigida, o cálculo da soma é feito dentro da função myfunc(), após obter os valores dos campos de entrada (xx e yy). Isso garante que os valores sejam atualizados corretamente antes de calcular o resultado da soma e exibir o alerta.


Um professor já respondeu

Envie você também uma dúvida grátis
Ver resposta
Minerva IA
do Profes
Respostas na hora
100% no WhatsApp
Envie suas dúvidas pelo App. Baixe agora
Precisa de outra solução? Conheça
Aulas particulares Encontre um professor para combinar e agendar aulas particulares Buscar professor