Problems with Nan Return in Javascript

Asked

Viewed 196 times

0

Personal in my code a simple calculator (not yet completed), my variable resultado when displayed always shows NaN, I wish you could help me fix this problem, I’m not finding the reason for the is not a number.

    <title>Calculadora</title>

    <!-- bootstrap - link cdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script type="text/javascript">
        function calcular(){
            var operacao = document.getElementById('operacao').value;
            var numero1 = document.getElementById('numero1').value;
            var numero1 = document.getElementById('numero2').value;

            numero1 = parseFloat(numero1);
            numero2 = parseFloat(numero2);

            if(numero1 == '' || numero2 == null){
                alert('Favor digitar um numero para a operação');
                return false;
            }

            if(numero2 == '' || numero1 == null){
                alert('Favor digitar um numero para a operação');
                return false;
            }

            var resultado = null;

            switch(operacao){
                case '1'://subtração
                    resultado = numero1 - numero2;
                    break;

                case '2'://adicao
                    resultado = numero1 + numero2;
                    break;

                case '3'://multiplicacao
                    resultado = numero1 * numero2;
                    break;

                case '4': //divisao
                    resultado = numero1 / numero2;
                    break;

                default:
                    return false;
            }

            alert(resultado);
        }

    </script>
</head>

<body>

    <div class="container">
        <div class="jumbotron">
            <h1>CALCULADORA</h1>
        </div>

        <hr />

        <div class="row">
            <div class="col-md-4">
                <input id="numero1" type="text" class="form-control" placeholder="Digite um número" />
            </div>

            <div class="col-md-4">
                <select id="operacao" class="form-control">
                    <option value="">--Selecione uma operação</option>
                    <option value="1">Subtração</option>
                    <option value="2">Adição</option>
                    <option value="3">Multiplicação</option>
                    <option value="4">Divisão</option>
                </select>
            </div>

            <div class="col-md-4">
                <input id="numero2" type="text" class="form-control" placeholder="Digite um número"/>
            </div>
        </div>

        <hr />

        <div class="row">
            <div class="col-md-4"></div>

            <div class="col-md-4"></div>

            <div class="col-md-4">
                <button type="button" class="btn btn-lg btn-primary pull-right" onclick="calcular();">Calcular</button>
            </div>
        </div>

        <hr />

        <div class="well">
            Resultado: <input type="text" class="form-control" readonly/>
        </div>
    </div>
</body>

javascript html

1 answer

4

The variable numero2 did not exist at the time of parseFloat() so he can’t calculate the way he wants.

Altere of:

var numero1 = document.getElementById('numero1').value;
var numero1 = document.getElementById('numero2').value;

To

var numero1 = document.getElementById('numero1').value;
var numero2 = document.getElementById('numero2').value;

Example: 

function calcular(){
    var operacao = document.getElementById('operacao').value;
    var numero1 = document.getElementById('numero1').value;
    var numero2 = document.getElementById('numero2').value;

    numero1 = parseFloat(numero1);
    numero2 = parseFloat(numero2);

    if(numero1 == '' || numero2 == null){
        alert('Favor digitar um numero para a operação');
        return false;
    }

    if(numero2 == '' || numero1 == null){
        alert('Favor digitar um numero para a operação');
        return false;
    }

    var resultado = 0;

    switch(operacao){
        case '1'://subtração
            resultado = numero1 - numero2;
            break;

        case '2'://adicao
            resultado = numero1 + numero2;
            break;

        case '3'://multiplicacao
            resultado = numero1 * numero2;
            break;

        case '4': //divisao
            resultado = numero1 / numero2;
            break;

        default:
            return false;
    }

    alert(resultado);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
    <div class="jumbotron">
        <h1>CALCULADORA</h1>
    </div>
    <hr />
    <div class="row">
        <div class="col-md-4">
            <input id="numero1" type="text" class="form-control" placeholder="Digite um número" />
        </div>

        <div class="col-md-4">
            <select id="operacao" class="form-control">
                <option value="">--Selecione uma operação</option>
                <option value="1">Subtração</option>
                <option value="2">Adição</option>
                <option value="3">Multiplicação</option>
                <option value="4">Divisão</option>
            </select>
        </div>

        <div class="col-md-4">
            <input id="numero2" type="text" class="form-control" placeholder="Digite um número"/>
        </div>
    </div>

    <hr />

    <div class="row">
        <div class="col-md-4"></div>

        <div class="col-md-4"></div>

        <div class="col-md-4">
            <button type="button" class="btn btn-lg btn-primary pull-right" onclick="calcular();">Calcular</button>
        </div>
    </div>

    <hr />

    <div class="well">
        Resultado: <input type="text" class="form-control" readonly/>
    </div>
</div>

  • 1

    Opa Caique, thank you so much guy, damn Ctrl c + Ctrl v. solved. Thanks even

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.