I'm trying to create a function where, upon button click, the sum of values in two input texts is displayed, but no matter what values I enter, it always outputs 0. What am I missing? Since both inputs default to 0, their sum is also showing up as 0. HTML
<!DOCTYPE html>
<html>
<head>
<title>WeB </title>
</head>
<body>
<input type="number" id = "num1" >
<input type="number" id = "num2" >
<button id = "add">+</button>
<script src = "app.js"></script>
</body>
</html>
JS
let num1 = Number(document.getElementById('num1').value)
let num2 = Number(document.getElementById('num2').value)
document.getElementById("add").addEventListener("click",function(){
console.log(num1,num2);
console.log(num1+num2);
})