[ Foro de Javascript ]

Duda sobre código

Buenos días
Tengo una duda con respecto a una función que me devuelva un resultado tomando los datos desde un formulario (incluyo el código), ya que, aunque la función realiza la operación correctamente al ejecutarlo me muestra en pantalla NaN, no sé el motivo o si estoy pasando los parámetros correctamente. Si alguien me puede explicar e indicar donde está el error o errores le agradeceré. Debo aclarar que estoy aprendiendo JS por cuenta propio. Gracias

HTML
<form action="" name="formpm">
<input type="text" id="nota1" placeholder="Ingrese la nota 1" name="nt1">
<input type="text" id="nota2" placeholder="Ingrese la nota 2" name="nt2">
<input type="text" id="peso1" placeholder="Ingrese el % de la nota 1" name="ps1">
<input type="text" id="peso2" placeholder="Ingrese el % de la nota 2" name="ps2">
<button onclick="promPonderado();">Prom Ponderado</button>
</form>
<p id="ponderado"></p>

<script src="js/app.js" type="text/javascript"></script>

JS
let nota1 = Number.parseFloat( document.formpm.nt1.value );
let nota2 = Number.parseFloat( document.formpm.nt2.value );
let peso1 = Number.parseFloat( document.formpm.ps1.value );
let peso2 = Number.parseFloat( document.formpm.ps2.value );
let pm = 0;

function promPonderado( nota1, nota2, peso1, peso2 ) {
let por1 = 0, por2 = 0;

por1 = peso1 / 100;
por2 = peso2 / 100;

pm = ( ( nota1 * por1 ) + ( nota2 * por2 ) ) / ( por1 + por2 );

return pm;
}

promPonderado( nota1, nota2, peso1, peso2 );

document.getElementById( "ponderado" ).innerHTML = pm;

Hola como estás. Primero yo tampoco se mucho pero:

return en esa función no está haciendo nada, para que haga algo tendrías que invocar la función y asignarla a una variable por ejemplo:
let resultado = promPonderado( nota1, nota2, peso1, peso2 ); así si valdría la pena el return porque
te estaría devolviendo un valor la función.

Pero en este caso lo borramos, tambien borramos la parte donde invocas la función:
promPonderado( nota1, nota2, peso1, peso2 );
Porque ya la estás invocando cuando le decis a button que la ejecute con onclick.

Tambien sacamos el button y le ponemos un input="button" porque de esta forma no se recarga la página cada vez que apretamos el boton.

Por otro lado: vamos a utilizar y te recomiendo que lo investigues, document.querySelector(); para seleccionar elementos de HTML en lugar de usar document.getElementById() u otro método, y así localizamos y tomamos el valor del input

let nota1 = document.querySelector("#nota1").value; //tomamos el valor de nota1
nota1=parseFloat(nota1); //le decimos que es un valor flotante, se puede poner todo junto si queres

let nota1=parseFloat(document.querySelector("#nota1).value); //no hace falta poner Number...

Y por último ponemos el .innerHTML dentro de la función!! Esto no va a permitir que se ejecute antes de que demos click en el botón.
Como también metemos todo dentro de la función entonces no hay que pasarle parámetros ni nada, la función se ejecuta cuando nosotros damos click, toma todos los datos y te devuelve el resultado que vos quieras, obviamente hay formas mejores pero esto te va a resultar

De todas formas creo que las fórmulas matemáticas no dan un buen resultado

Y lo que te quiere decir con NaN es que el valor no es numérico, te dejo tu código modificado que funciona. espero que te sirva. Saludos

HTML
<form action="" name="formpm">
      <input type="text" id="nota1" placeholder="Ingrese la nota 1" name="nt1">
      <input type="text" id="nota2" placeholder="Ingrese la nota 2" name="nt2"    
      <input type="text" id="peso1" placeholder="Ingrese el % de la nota 1" name="ps1">
      <input type="text" id="peso2" placeholder="Ingrese el % de la nota 2" name="ps2">
      <input type="button" onclick="promPonderado();" value="Prom Ponderado"/>
</form>

JS
function promPonderado() {
   let nota1 = document.querySelector("#nota1").value;
   nota1=parseFloat(nota1);

   let nota2 = document.querySelector("#nota2").value;
   nota2=parseFloat(nota2);

   let peso1 = document.querySelector("#peso1").value;
   peso1=parseFloat(peso1);

   let peso2 = document.querySelector("#peso2").value;
   peso2=parseFloat(peso2);

   let pm=0;

   let por1 = 0, por2 = 0;

   por1 = peso1 / 100;
   por2 = peso2 / 100;

   pm =(( nota1 * por1 ) + ( nota2 * por2 )) / ( por1 + por2 );
   document.querySelector( "#ponderado" ).innerHTML = pm;
}