Même après avoir appliqué les valeurs d'entrée, je reçois la nan comme réponse

si nous accédons à la valeur du champ de saisie avant tout événement, nous devenons indéfinis afin que nous puissions accéder à la valeur du champ après avoir généré l'événement de clic.

<input type="text" id="n1" name="name">
    <input type="text" id="n2" name="emai">
    <input type="submit" id="ans" value="Submit">

    <script>


        var btn = document.getElementById("ans");
        btn.addEventListener("click",function(){
            var x = parseFloat(document.getElementById("n1").value); 
            var y = parseFloat(document.getElementById("n2").value); 
              var result = x + y ;    //expression
              console.log(result);   // output as 'Nan'
              console.log(typeof(result)); // output as 'number'

        });
    </script>

Le problème ici est que vous avez défini la valeur par défaut sur x & y comme chaînes vides au début comme:

<input type="number" id="n1">
<input type="number" id="n2">
<button id="ans">ADD</button>

Donc, quelles que soient les valeurs que vous entrez dans les entrées, vous obtiendrez toujours Nan . Voici ce qui se passe actuellement:

var btn = document.getElementById("ans");
btn.addEventListener("click", function() {
  var x = parseFloat(document.getElementById("n1").value); //input value1
  var y = parseFloat(document.getElementById("n2").value); //input value2
  var result = x + y;
  console.log(result);
  console.log(typeof(result));
});

<input type="text" id="n1">
<input type="text" id="n2">
<button id="ans">ADD</button>

Le seul moyen de résoudre ce problème est de placer les variables à l'intérieur du clic, de sorte que lorsque vous cliquez sur le bouton, vous n'obtiendrez que les dernières valeurs de chaque entrée comme:

var btn = document.getElementById("ans");
btn.addEventListener("click", function() {
  var x = parseFloat(document.getElementById("n1").value); //input value1
  var y = parseFloat(document.getElementById("n2").value); //input value2
  var result = x + y;
  console.log(result);
  console.log(typeof(result));
});

<button id="ans">ADD</button>

De plus, si vous n'utilisez que des nombres ici, vous pouvez utiliser au lieu de comme:

var x = parseFloat(""); //input value1
var y = parseFloat(""); //input value2

var btn = document.getElementById("ans");
btn.addEventListener("click", function() {
  var result = x + y; //expression
  console.log(result); // output as 'Nan'
  console.log(typeof(result)); // output as 'number' 
});

var x = parseFloat(document.getElementById("n1").value); //input value1
var y = parseFloat(document.getElementById("n2").value); //input value2