Utilisation des éléments <form> et <input> comme entrée pour le code JavaScript. Est-ce la meilleure façon de le faire?

Folk, je suis débutant au codage, évidemment, alors que j'ai terminé quelques cours de Lynda récemment sur HTML et Javascript, j'ai frappé un mur avec ma simple page HTML. Fondamentalement, ce que je veux, c'est faire un calcul de base avec JavaScript pour que l'utilisateur entre les deux nombres en utilisant des éléments de formulaire / entrée HTML et effectue un calcul arithmétique de base sur JS. Pour une raison quelconque, le code ne fonctionne pas. Quelqu'un peut-il me diriger vers la bonne direction comme pourquoi ces valeurs d'entrée ne sont pas lues par JS? Est-ce que GetElementById est le bon moyen?

De plus, j'utilise la console.log pour déplacer les résultats car je ne sais pas encore comment l'afficher sur la page HTML en tant que texte sous le bouton Soumettre .

Le code HTML:

<!DOCTYPE html> <html> <head> <title>Accurate Mass Error Calculator</title> </head> <body> <h1> Accurate Mass Error Calculator </h1> <p> Please enter the values below for each field:</p> <form onsubmit="return calculateError()" method="post"> <p> Exact Theoretical Mass: <input id="exactMass" type="number" step="any" name="exactMass"/></p> <p> Accurate Experimental Mass: <input id="accurateMass" type="number" step="any" name="accurateMass"/></p> <p> <input id="submitButton" type="submit" name="submit1" value="Calculate" onclick="return calculateError()" /></p> </form> <script type="text/javascript" src="ppmError.js"></script> </body> </html> 

Le code JS (ppmError.js):

 function calculateError () { var exactMass=document.getElementById("exactMass"); var accurateMass=document.getElementById("accurateMass"); var ppmError=(accurateMass.value-exactMass.value)/exactMass.value*1000000; if (isNaN (ppmError) ) { console.log ("Not a valid Entry! Please try again.") } else { console.log(ppmError); } } 

Comme l'a indiqué Satpal dans le commentaire, vous devriez effectivement transmettre votre texte à un int avec:

 var exactMass = parseInt(document.getElementById("exactMass").value); var accurateMass = parseInt(document.getElementById("accurateMass").value); var ppmError=(accurateMass-exactMass)/exactMass*1000000; 

Pour votre autre question, dans votre html, ajoutez un paragraphe vide où vous souhaitez afficher votre résultat

<p id="result"></p>

Et au lieu d'appeler console.log vous pouvez effectuer:

 document.getElementById('result').innerHTML = ppmError; 

Utilisez la solution de singe31, mais pour éviter de recharger la page après avoir cliqué sur le type de changement de votre bouton de "soumettre" à "bouton" ou placer "renvoyer faussement"; Comme la dernière ligne de calculError () fonction. Sinon, vous ne verrez aucun changement sur la page.