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

Não consigo acessar dois Inputs em um código

meta charset="UTF-8">
<title>Interagindo</title>
<head><h3>Calcule sua média de gastos</h3></head>
<body>
    Digite<br>
    Número de compras:<br>
    <input type="text" name="numeroCompra">
    <br>
    Quanto já havia gastado? <br>
    <input type="text" name="valorGastoAnterior">
    <button> Calcular Média </button>
    <script type="text/javascript">


        function texto (txt){
            document.write( txt + "<br>");
        }

        var quantidadeCompras = document.querySelector ("numeroCompra") ;
        var gastoAnterior = document.querySelector("valorGastoAnterior") ;
        var botao = document.querySelector ("button");
        var totalCompra = gastoAnterior.value


        function calcular(){
            for (var compras = 1; compras <= quantidadeCompras.value ; compras++){ 
                var valorCompra = parseFloat(prompt("Qual o valor da compra?"));
                totalCompra = totalCompra + valorCompra ;
            }

            var mediaCompra = totalCompra/(quantidadeCompras.value + 1) ;
            texto("Sua média de compras foi de " + mediaCompra);
        }
        botao.onclick = calcular ;
    </script>
</body>

Minha ideia com base nas aulas era de ter duas caixas onde o usuário digitasse o número de compras que ele realizou e após isso o gasto que ele já havia realizado, para que eu pudesse somar todos os gastos bem como o anterior e tirar a média deles. Contudo não sei como chamar a input correta para a validação do código.

Se possível gostaria de saber o erro do meu código bem como a maneira correta de se chamar varias imputa diferentes.

Obrigada e parabéns pelas aulas.

3 respostas
solução!

Olá Paloma,

para referenciar os inputs pelos seus name você pode fazer assim:

var quantidadeCompras = document.querySelector("input[name='numeroCompra']") ;
var gastoAnterior = document.querySelector("input[name='valorGastoAnterior']") ;

ou então você pode, de outra forma, alterar os name para id:

    <input type="text" id="numeroCompra">
    <input type="text" id="valorGastoAnterior">

e então referenciá-los assim:

var quantidadeCompras = document.querySelector("#numeroCompra") ;
var gastoAnterior = document.querySelector("#valorGastoAnterior") ;

Bom dia Paloma,

O problema esta que você esta tentando selecionar seu elemento pelo atributo name da forma errada. O método document.querySelector() não vai conseguir encontrar o elemento e vai gerar o erro.

Para selecionar os inputs da sua aplicação você vai ter que fazer da seguinte forma:

var quantidadeCompras = document.querySelector("input[name='numeroCompra'");
var gastoAnterior = document.querySelector("input[name='valorGastoAnterior']");

Abraços!

Obrigada pela ajuda!!!!!!!