2017-09-11 2 views
1

m'a donné une formule où ci-dessous:Calcul continue à donner un résultat NaN

weightdifference = (|crushedWeight - weightBA|/weightBA)* 100% 

weightBA et crushedWeight sont des valeurs de textes d'entrée. Je l'ai fait faire une fonction indiquée ci-dessous:

function calDiffWeight() { 
    var weightDS = document.getElementById("weightDS"); 
    var crushedWeight = document.getElementById("crushedWeight"); 
    var abs = -1; 
    var diffWeight = ((crushedWeight - weightDS) * abs)/weightDS * 100; 
    document.getElementById("diffWeight").value = diffWeight; 
} 

et pour le calcul absolu |crushedWeight - weightBA| comment dois-je faire?

+0

Utilisez parseFloat() sur les valeurs – Lalit

+1

Commencez par envoyer la sortie à la console, en particulier '' weightDS' et crushedWeight'. La chance est assez grande ces valeurs ne sont pas définies. – giorgio

Répondre

1

En fonction de votre code, je fait les modifications suivantes:

  • Vous obtenez les éléments pour weightDS et crushedWeight mais vous ne avez jamais eu les valeurs de ces entrées;
  • Convertis les valeurs en nombre flottant avant de les utiliser pour le calcul
  • Utilisez Math.abs() pour rendre le nombre absolu.

const 
 
    form = document.getElementById('form'); 
 
    
 
form.addEventListener('submit', onFormSubmit); 
 

 
function onFormSubmit() { 
 
    event.preventDefault(); 
 
    calDiffWeight(); 
 
} 
 
function calDiffWeight() { 
 
    var weightDS = parseFloat(document.getElementById("weightDS").value); 
 
    var crushedWeight = parseFloat(document.getElementById("crushedWeight").value); 
 
    var diffWeight = (Math.abs(crushedWeight - weightDS))/weightDS * 100; 
 
    document.getElementById("diffWeight").value = diffWeight; 
 
}
<form id="form"> 
 
    <label> 
 
    WeightDS: 
 
    <input type="number" id="weightDS"/> 
 
    </label> 
 
    <label> 
 
    Crushed Weight: 
 
    <input type="number" id="crushedWeight"/> 
 
    </label> 
 
    
 
    <button>Calculate</button> 
 
</form> 
 

 
<p>Result</p> 
 
<input type="number" id="diffWeight"/>

+0

merci beaucoup, cela fonctionne parfaitement! – vin

1

Dans le cas weightDS est une zone de saisie Je recommande document.getElementById("weightDS").value;, car avec juste getElementById vous obtenez simplement le nœud dom. pas la valeur de tout ce qu'il peut contenir.

une plus grande et plus belle réponse est ici How do I get the value of text input field using JavaScript?

+0

merci pour vos commentaires! – vin

1

La méthode document.getElementById(); retourne un élément HTML. Évidemment, vous ne pouvez pas faire de maths avec un élément HTML. Donc, vous êtes à la recherche de l'attribut value de cet élément HTML. Comme il s'agit d'une chaîne, parsez-la en entier (ou flottez selon votre situation).

var weightDS = parseInt(document.getElementById("weightDS").value); 
var crushedWeight = parseInt(document.getElementById(document.getElementById("crushedWeight").value); 
+0

merci pour vos commentaires! – vin

0

utilisation .value après document.getElementById ("") weightDS

function calDiffWeight() { 
var weightDS = document.getElementById("weightDS").value; 
var crushedWeight = document.getElementById("crushedWeight").value; 
var abs = -1; 
var diffWeight = ((crushedWeight - weightDS) * abs)/weightDS * 100; 
document.getElementById("diffWeight").value = diffWeight; 
} 
+0

merci pour vos commentaires! – vin

0

document.getElementById('elementId'); renvoie un élément DOM. Afin d'obtenir la valeur, vous devez appeler la propriété value.

Voici une solution pour votre exemple:

var weightDS = parseInt(document.getElementById("weightDS").value); 
var crushedWeight = parseInt(document.getElementById(document.getElementById("crushedWeight").value); 
+0

merci de vos commentaires! – vin