Calculate Two-digit Average reported by the user. However, the result is always zero

Question

   
function media(){
  var Media = (n1+n2)/2;
  document.write("<br> media:", Media);
}

var numero1 = document.querySelector("#number1");
var n1 = Number(numero1.value);

var numero2 = document.querySelector("#number2");
var n2 = Number(numero2.value);

var botao = document.querySelector("button");
botao.onclick = media; 

<meta charset="UFT-8">

<input type="number" name="numero1" id="number1">
<input type="number" name="numero2" id="number2">

<button>media</button>

Answer 1

Come on!

//Criação da função que receberá como parâmetros os valores dos seus botões
function media(num1, num2) {
  let mediaCalculada = (num1 + num2) / 2;
  document.write(" <br> media:", mediaCalculada);
}

//Atribuímos o seu elemento (seu botão) a uma variável
var botao = document.querySelector("#calcular-media");

//Aqui nós atribuímos um evento (o evento do clique) ao seu botão 
botao.onclick = function() {

  //Nessa duas linhas abaixo nós formatamos os valores que vem do value dos seus botões, pois eles vem como String,
  //...o que impossibilita de realizarmos a operação matemática. Por isso temos que formatar para inteiro.
  let n1 = parseInt(document.querySelector("#number1").value);
  let n2 = parseInt(document.querySelector("#number2").value);

  //Aqui nós passamos os parâmetros (que são os valores vindos dos seus botões) para a função e executamos ela.
  //Ou seja, quando clicamos no botão, executamos a função
  media(n1, n2);
}

<!-- Esses dois botões abaixo não precisam ser do tipo number -->
<!-- Eles podem ser do tipo text, por exemplo -->
<input type="number" id="number1">
<input type="number" id="number2">

<!-- Botão que ativa o evento click -->
<button id="calcular-media">Média</button>

Answer 2

Well, the call of the function is coming without the parameters n1 and N2, but still it would result in error, because the point is that every time you click on the button it should bring the new values of number1 and number2 to n1 and N2 and this is not happening here.

So to get around this situation I created a arrowfunction and so that every time the button is clicked it fetches the value of number1 and number2, assigns in n1 and N2 and makes the calculation of the average assigning in the average variable and finally being written in the document with Document.write.

HTML

<input type="number" name="numero1" id="number1">
<input type="number" name="numero2" id="number2">
<button>media</button>

JAVASCRIPT

var numero1 = document.querySelector("#number1");
var numero2 = document.querySelector("#number2");

var botao = document.querySelector("button");

botao.onclick = () => {
  var n1 = Number(numero1.value);  
  var n2 = Number(numero2.value);
  
  var media = (n1 + n2) / 2;

  document.write("Média: " + media);
}

Test the code on:

https://jsfiddle.net/veo9fj6y/

Answer 3

Do so in your HTML:

<meta charset="UFT-8">

<input type="number" name="numero1" id="number1">

<input type="number" name="numero2" id="number2">

<button onclick="media()"></button>

In your javascript:

function media(){
  let n1 = document.getElementById("number1").value;
  let n2 = document.getElementById("number2").value;
  let media = (n1+n2)/2;
  alert(media);
}