So, I'm trying to make a grade calculator and I have run into some problems with my JS form table. I'm trying to find a way so that if the user does not type in numbers for all 3 of the b, c, and d values it will still give me the users class grade. However, when the user does not type in numbers for all 3 of the b, c, and d values I get the result of NaN. My program works, when there are numbers in all 3 of the b, c, and d values but I also wan't it to work when there isn't.
Note: I am new to both JS and HTML.
Here's my code:
<form name="classGradeCalc" action>
<table>
<tbody>
<tr>
<td>Grading Category</td>
<td>Points Earned</td>
<td>Max Poins</td>
<td>Weight</td>
</tr>
<tr>
<td><input type ="text" size="20" id="a1" value=""></td>
<td><input type="number" size="5" id="b1" value="0"></td>
<td><input type= "number" size="5" id="c1" value="0"></td>
<td><input type="number"size="5" id="d1" value="0"></td>
</tr>
<tr>
<td><input type ="text" size="20" id="a2" value=""></td>
<td><input type="number" size="5" id="b2" value="0"></td>
<td><input type= "number" size="5" id="c2" value="0"></td>
<td><input type="number"size="5" id="d2" value="0"></td>
</tr>
<tr>
<td><input type ="text" size="20" id="a3" value=""></td>
<td><input type="number" size="5" id="b3" value="0"></td>
<td><input type= "number" size="5" id="c3" value="0"></td>
<td><input type="number"size="5" id="d3" value="0"></td>
</tr>
<tr>
<td><input type ="text" size="20" id="a4" value=""></td>
<td><input type="number" size="5" id="b4" value="0"></td>
<td><input type= "number" size="5" id="c4" value="0"></td>
<td><input type="number"size="5" id="d4" value="0"></td>
</tr>
<tr>
<td><input type ="text" size="20" id="a5" value=""></td>
<td><input type="number" size="5" id="b5" value="0"></td>
<td><input type= "number" size="5" id="c5" value="0"></td>
<td><input type="number"size="5" id="d5" value="0"></td>
</tr>
<tr>
<td><input type ="text" size="20" id="a6" value=""></td>
<td><input type="number" size="5" id="b6" value="0"></td>
<td><input type= "number" size="5" id="c6" value="0"></td>
<td><input type="number"size="5" id="d6" value="0"></td>
</tr>
<tr>
<td><input type ="text" size="20" id="a7" value=""></td>
<td><input type="number" size="5" id="b7" value="0"></td>
<td><input type= "number" size="5" id="c7" value="0"></td>
<td><input type="number"size="5" id="d7" value="0"></td>
</tr>
<tr>
<td><input type ="text" size="20" id="a8" value=""></td>
<td><input type="number" size="5" id="b8" value="0"></td>
<td><input type= "number" size="5" id="c8" value="0"></td>
<td><input type="number"size="5" id="d8" value="0"></td>
</tr>
<tr>
<td><input type="button" value="Calculate Grade" onclick="calcGrade()"></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Class Grade</td>
</tr>
<tr>
<td><input size="5" name="gca1"></td>
<td><input size="5" name="gca2"></td>
<p id="pointsEarned"></p>
<p id="maxPoints"></p>
<p id="weight"></p>
<p id="classGrade"></p>
</tr>
</tbody>
</table>
</form>
<script>
function calcGrade()
{
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
var f = 0;
var g = 0;
var h = 0;
var z = 0;
var cg = 0;
var cg1 = 0;
var cg2 = 0;
var cg3 = 0;
var cg4 = 0;
var cg5 = 0;
var cg6 = 0;
var cg7 = 0;
var cg8 = 0;
//First Row
var B1 = parseFloat(document.getElementById("b1").valueAsNumber);
var C1 = parseFloat(document.getElementById("c1").valueAsNumber);
var D1 = parseFloat(document.getElementById("d1").valueAsNumber);
//Second Row
var B2 = parseFloat(document.getElementById("b2").valueAsNumber);
var C2 = parseFloat(document.getElementById("c2").valueAsNumber);
var D2 = parseFloat(document.getElementById("d2").valueAsNumber);
//Third Row
var B3 = parseFloat(document.getElementById("b3").valueAsNumber);
var C3 = parseFloat(document.getElementById("c3").valueAsNumber);
var D3 = parseFloat(document.getElementById("d3").valueAsNumber);
//Fourth Row
var B4 = parseFloat(document.getElementById("b4").valueAsNumber);
var C4 = parseFloat(document.getElementById("c4").valueAsNumber);
var D4 = parseFloat(document.getElementById("d4").valueAsNumber);
//Fifth Row
var B5 = parseFloat(document.getElementById("b5").valueAsNumber);
var C5 = parseFloat(document.getElementById("c5").valueAsNumber);
var D5 = parseFloat(document.getElementById("d5").valueAsNumber);
//Sixth Row
var B6 = parseFloat(document.getElementById("b6").valueAsNumber);
var C6 = parseFloat(document.getElementById("c6").valueAsNumber);
var D6 = parseFloat(document.getElementById("d6").valueAsNumber);
//Seventh Row
var B7 = parseFloat(document.getElementById("b7").valueAsNumber);
var C7 = parseFloat(document.getElementById("c7").valueAsNumber);
var D7 = parseFloat(document.getElementById("d7").valueAsNumber);
//Eigth Row
var B8 = parseFloat(document.getElementById("b8").valueAsNumber);
var C8 = parseFloat(document.getElementById("c8").valueAsNumber);
var D8 = parseFloat(document.getElementById("d8").valueAsNumber);
//Calculations
a = (((B1) / (C1)) * (D1));
b = (((B2) / (C2)) * (D2));
c = (((B3) / (C3)) * (D3));
d = (((B4) / (C4)) * (D4));
e = (((B5) / (C5)) * (D5));
f = (((B6) / (C6)) * (D6));
g = (((B7) / (C7)) * (D7));
h = (((B8) / (C8)) * (D8));
z = parseFloat(D1) parseFloat(D2) parseFloat(D3) parseFloat(D4) parseFloat(D5) parseFloat(D6) parseFloat(D7) parseFloat(D8);
cg = ((((B1) / (C1)) * (D1)) (((B2) / (C2)) * (D2)) (((B3) / (C3)) * (D3)) (((B4) / (C4)) * (D4)) (((B5) / (C5)) * (D5)) (((B6) / (C6)) * (D6)) (((B7) / (C7)) * (D7)) h) / (z);
if(z > 100)
{
alert("Error, your weight percentage column is over 100, please make sure it is less than or equal to 100!");
}
else{
document.getElementById("weight").innerHTML = z;
document.getElementById("classGrade").innerHTML = cg;
}
}
</script>
CodePudding user response：
As you know in HTML input every value is string, when you try to convert it in number and there is not any number (When you have not any value in input it will it's default value is "") value it returns NaN value (Not a Number);
To avoid this you can check if is NaN then don't do any mathematical operation with NaN;
Use Number.isNaN() to check .
But in this case I would recommend to mark three inputs as required fields, because there is not addition, here divsion and multiplication. There is not possible just use two values without any NaN issues .
CodePudding user response：
Problem:
This part of your code below is what's giving you the problem.
a = (((B1) / (C1)) * (D1));
b = (((B2) / (C2)) * (D2));
c = (((B3) / (C3)) * (D3));
d = (((B4) / (C4)) * (D4));
e = (((B5) / (C5)) * (D5));
f = (((B6) / (C6)) * (D6));
g = (((B7) / (C7)) * (D7));
h = (((B8) / (C8)) * (D8));
z = parseFloat(D1) parseFloat(D2) parseFloat(D3) parseFloat(D4) parseFloat(D5) parseFloat(D6) parseFloat(D7) parseFloat(D8);
cg = ((((B1) / (C1)) * (D1)) (((B2) / (C2)) * (D2)) (((B3) / (C3)) * (D3)) (((B4) / (C4)) * (D4)) (((B5) / (C5)) * (D5)) (((B6) / (C6)) * (D6)) (((B7) / (C7)) * (D7)) h) / (z);
Here (B/C) * D this part is the problem because when no values are entered the equation becomes (0/0) * 0 & in JS 0/0 = NaN and after that doesn't matter which operations you perform the result will always end-up being NaN
Another situation that might not have encountered while testing is that if only C Value is not given, then the equation becomes: (B/0) * D in this situation, the answer will end-up being Infinity. Because in JS anyNumberX / 0 = Infinity
Solution:
Now, the solutions to this issue is that you re-code your calculations such that Denominators don't end-up having the value 0.
To be true, the simplest & realistic solution would be to conditionally check that all the values are given & if not, then just show an alert to the user asking for all valid values to be inputted.