Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como aplicar o input.value nesse caso? ao ser executado, o resultado é "Sua média foi NaN"

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Interaja de maneira diferente com o usuário e atividade Campo de texto e botão

por Thiago Cavalcanti Azevedo
| 60.5k xp | 5 posts
Professor 
<h1>Cálculadora de média</h1><br>
<input id="nome"/>Escreva seu nome:<br>
<input id="n_1"/>Digite sua primeira nota:<br>
<input id="n_2"/>Digite sua segunda nota:<br>
<input id="n_3"/>Digite sua terceira nota:<br>
<input id="n_4"/>Digite sua quarta nota:<br>
<button>MÉDIA</button>


<script>

    var nome = document.querySelector("nome");
    var nota_1 = document.querySelector("#n_1");
    var nota_2 = document.querySelector("#n_2");
    var nota_3 = document.querySelector("#n_3");
    var nota_4 = document.querySelector("#n_4");




    var media = (nota_1+nota_2+nota_3+nota_4)/4;

    function verifica (){
        alert("Sua média foi " + media);
    }

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


</script>
1 resposta
solução!
por Arthur Fernandes
| 535k xp | 473 posts
Alura Scuba Team Estágiario Scuba Team | Escola de Programação

Olá Thiago, tudo bem com você?

O querySelector retorna o elemento HTML associado a uma tag, classe ou id, nesse caso de campos input.

Para acessar o valor contido no campo de input, precisamos acessar o valor contido no elemento, ou seja, seu value.

O JavaScript, bem como a maioria das linguagens de programação, avalia o valor de funções e nos permite utilizar esse valor sem precisar guardá-lo em uma variável. Como assim?

Vamos olhar o trecho de código

var nota_1 = document.querySelector("#n_1");

Para descrever, poderíamos dizer que o JavaScript vai até o documento HTML, utilizando o document, e procura o elemento com o id n_1, utilizando a função querySelector; a partir disso, ele pega o resultado dessa busca e joga na variável nota_1. Legal, né?

Esse comportamento da execução da função, nos permite usar outras funções e acessar campos a partir do seu retorno, como por exemplo, acessar o value:

document.querySelector("#n_1").value;

Para entender esse trecho, podemos dizer que o JavaScript vai até o documento HTML, utilizando o document, e procura o elemento com o id n_1, utilizando a função querySelector, e por final, acessa o valor do elemento que ele encontrou na função querySelector. Mas atenção: dessa vez não guardamos esse valor em nenhuma variável, então se quisermos usar mais na frente do código não vai ser possível.

Outra maneira possível, seria acessar o valor direto da variável nota_1, dessa maneira:

nota_1.value;

Que acessa o valor da variável nota_1, onde guardamos o elemento HTML buscado pelo document.querySelector.

Assim, é possível pegar o valor literal de um elemento no HTML, utilizando a função document.querySelector.

Para se aprofundar mais, você pode checar a documentação do querySelector da mdn e a documentação do input.value, da w3cschools que está em inglês mas você pode utilizar a ferramenta de tradução do seu navegador caso seja necessário!

Me coloco à disposição e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!