How to take values from one or more inputs

Asked

Viewed 38 times

0

I’m starting programming with Javascript and I’m wondering if I can get the 3 values of input.

The result always comes Not A Number (NAN)

function media(){
    var a = parseInt(document.getElementById('valor1'));
    var b = parseInt(document.getElementById('valor2'));
    var c = parseInt(document.getElementById('valor3'));

    var resultado = (a + b + c) / 3;

    alert("A média é : " + resultado);
} 
        form {
        /* Apenas para centralizar o form na página */
        margin: 0 auto;
        width: 400px;
        /* Para ver as bordas do formulário */
        padding: 1em;
        border: 1px solid #CCC;
        border-radius: 1em;
        }
         label {
        /*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas */
        display: inline-block;
        text-align: right;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Média</title>
</head>

<body>


    <form>
        <h1>Cálculo Média</h1>

        <div class="form-group ml-">
            <label>Valor 1</label>
            <input type="text" id="valor1" class="form-control col-6">
        </div>
        <div class="form-group">
            <label>Valor 2</label>
            <input type="text" id="valor2" class="form-control col-6">
        </div>
        <div class="form-group">
                <label>Valor 3</label>
                <input type="text" id="valor3" class="form-control col-6">
        </div>
            <button type="submit" class="btn btn-primary ml-5 my-3" onclick="media()">Calcular</button>
    </form>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

javascript

1 answer

1


You need to put the value to get the value of the input:

var a = parseInt(document.getElementById('valor1').value);
var b = parseInt(document.getElementById('valor2').value);
var c = parseInt(document.getElementById('valor3').value);

  • It was just that, I had put the . value before, only I had another error and ended up not working, and I ended up taking the . value!! I use Vscode when I put the . value does not appear the view in that window as other functions of Avascript, as if it did not exist, sometimes it happens in several parts of code.

  • That’s because the method getElementById returns an object of type Node. value is not a property of the Node class, only classes that extend the Node class as Htmlinputelement have the property value. So Vscode does not suggest this property, because as far as Vscode knows, this property does not exist in the object.

  • So that’s why!! Thank you so much for your help!

Browser other questions tagged javascript

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