Receber um valor digitado?

bom dia

estou aprendendo java script e gostaria de ajuda para resolver um problema.

no html eu fiz duas tag input para receber um valor, um número
e criei um botão para imprimir o resultado em java script.
porém quando eu coloco o código java script não sai o resultado. verifiquei que preciso receber esse valor digitado na input mas não sei como fazer, poderiam me ajudar?

essa é as tag que inseri no html:

<input>n1</input>
<input>n2</input>
<button>resultado</button>

quando eu digitar um número na input n1 quero que no java script armazene esse número. mesmo caso quando digitar o segundo número na input n2.

e quando eu clicar no botão resultado quero emitir um alerta contendo o resultado.

fiquei pensando que no java script tem de acessar primeiro a tag e depois capturar o número digitado, no java scirpt fiz o seguinte código

var n1 = document.getElementsByTagName('input', 'n1').n1
var n2 = document.getElementsByTagName('input', 'n2').n2

funciton calculo () {
    resultado = n1 + n2;
};

mas não sai nenhum resultado, poderiam me ajudar?

Os nomes de campos são responsável em identifica, exemplo:

<input id="n1" name="n1" />
<input id="n2" name="n2" />
<button id="btnresultado">resultado</button>

e no Javascript:

var n1 = document.getElementById('n1').value;
var n2 = document.getElementById('n2').value;

function calculo (n1, n2) 
{
     return n1 + n2;
};
const resultado = calculo(n1, n2);

e ainda não estaria funcionado mas, explica bem o que deveria ser feito. Já o código abaixo funciona, mas, uma refatoração deve ser feita … Como você é estudante quero propor a você que estude mais.

<input id="n1" name="n1" /><br />
<input id="n2" name="n2" /><br />
<span id="resultado"></span><br />
<button id="btnresultado" onClick="calculo(document.getElementById('n1').value, document.getElementById('n2').value)">resultado</button>

function calculo (n1, n2) 
{
		var resultado = parseInt(n1) + parseInt(n2);
    document.getElementById('resultado').textContent = resultado;
};