estoy practicando Javascript y html y cuando quiero hacer un input del tipo "number" con dos variables(numeros) a la hora de usar javascript no me da el resultado correcto y me lanza: "NaN" Utilizo boostrap para los botones y fondo, el boton sumar tendría que arrojar el resultado de los dos numeros en el input sumados. El boton restar no hace nada por ahora.
const spanResultadoCuenta = document.getElementById('spanResultado')
var numUno = document.getElementById('num_uno').value;
var numDos = document.getElementById('num_dos').value;
const btnSumar = document.getElementById('sumar');
var resultado = 0;
btnSumar.addEventListener('click', () => {
spanResultadoCuenta.textContent = Number(numUno)+Number(numDos);
} )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botones sumadores y restadores</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container py-5 bg-warning text-center">
<label for="num_uno" id="num_uno">Numero Uno</label>
<input type="number">
<label for="num_dos" id="num_dos">Numero Dos</label>
<input type="number">
<button class="btn btn-info" id="sumar">
Sumar
</button>
<button class="btn btn-danger" id="restar">
Restar
</button>
<h4 class="my-5">Resultado: <span id=spanResultado>0</span></h4>
<script src="scriptboton.js"></script>
</div>
</body>
</html>