Даже после разбора входных значений я получаю NaN в качестве ответа

Question

// html код рассчитать

Сложение двух чисел

var x = parseFloat(document.getElementById("n1").value); //input value1
var y = parseFloat(document.getElementById("n2").value); //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'

});

Answer 1

если мы получим доступ к значению поля ввода до какого-либо события, мы получим неопределенное значение, чтобы мы могли получить доступ к значению поля после генерации события щелчка.

<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>

Answer 2

let btn = document.getElementById("ans")
btn.addEventListener("click", function() {
	let x = getFloat(getElVal("n1"))
	let y =  getFloat(getElVal("n2"))
	let result = x + y

	if (!isNaN(x) && !isNaN(y)) {
		console.log('valid op')
	}

	console.log(result);
	console.log(typeof(result))
	
	function getFloat(val) {
		return parseFloat(val)
	}

	function getElVal(id) {
		ele = document.getElementById(id)
		return ele? ele.value:undefined
	}
})

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

Answer 3

Проблема здесь в том, что вы установили значение по умолчанию x & y как пустые строки при запуске, как:

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

Итак, независимо от того, какие значения вы вводите во входах, вы будете всегда получай Nan. Вот что сейчас происходит:

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' 
});

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

Единственный способ решить эту проблему - поместить переменные в щелчок, так что при нажатии кнопки только вы получите самые последние значения каждого ввода, такие как:

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>

Кроме того, если вы собираетесь использовать здесь только цифры, то вы можете использовать <input type="number" /> вместо <input type="text" />, например:

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="number" id="n1">
<input type="number" id="n2">
<button id="ans">ADD</button>