Reputation: 39
I'm creating a mark-sheet for my PHP project where I have used JS to determine whether a student is 'pass' or 'fail'.
It checks the sum of 'pass' marks and the obtained marks. If a student gets 0
in one subject but the total is more than the required pass marks then it shows PASS
in the result field which I don't want. I want JS to check if it's 0
in any subject and show fail
.
Any help is much appreciated. I'm very new to JS. Please guide me.
$(function() {
var TotalValue = 0;
$("tr #data").each(function(index, value) {
currentRow = parseFloat($(this).text());
TotalValue += currentRow
});
document.getElementById('fulltotal').innerHTML = TotalValue;
var TotalValue1 = 0;
$("tr #data1").each(function(index, value) {
currentRow = parseFloat($(this).text());
TotalValue1 += currentRow
});
document.getElementById('passtotal').innerHTML = TotalValue1;
var TotalValue2 = 0;
$("tr #data2").each(function(index, value) {
currentRow = parseFloat($(this).text());
TotalValue2 += currentRow
});
document.getElementById('obtotal').innerHTML = TotalValue2;
});
var ptotal = $("#passtotal").val();
var ototal = $("#obtotal").val();
if (ptotal > ototal) {
document.getElementById('results').innerHTML = "FAIL";
} else {
document.getElementById('results').innerHTML = "PASS";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Code</th>
<th>Subject / Course Title</th>
<th>Maximum Marks</th>
<th>Pass Marks</th>
<th>Marks Awarded</th>
</tr>
</thead>
<tbody>
<tr class="body-data">
<td>1</td>
<td>maths<td>
<td id="data">100</td>
<td id="data1">33</td>
<td id="data2">54</td>
</tr>
<tr class="body-data">
<td>2</td>
<td>english<td>
<td id="data">100</td>
<td id="data1">33</td>
<td id="data2">12</td>
</tr>
<tr class="body-data">
<td>3</td>
<td>science<td>
<td id="data">100</td>
<td id="data1">33</td>
<td id="data2">74</td>
</tr>
<tr class="body-data">
<td>4</td>
<td>social science<td>
<td id="data">100</td>
<td id="data1">33</td>
<td id="data2">0</td>
</tr>
</tbody>
<tfoot>
<tr class="total-data">
<td></td>
<td style="text-align: right; padding-right: 10px;">TOTAL </td>
<td style="border-top: 2px solid #2193b0!important;" id="fulltotal"></td>
<td style="border-top: 2px solid #2193b0!important;" id="passtotal"></td>
<td style="border-top: 2px solid #2193b0!important;" id="obtotal"></td>
</tr>
</tfoot>
</table>
Upvotes: 1
Views: 3954
Reputation: 23654
Here you go, consolidated a bit and normalized to all be jQuery. You seem to be familiar with most of this, but instead of parseFloat, I used the shorthand +
which converts the string into a number (float or integer). Also code like this +$(this).find('td').eq(4).text()
means find the td with index 3 under me, get its text value and convert into a number. Additionally, in your pass/fail
if statement at the end, you were comparing strings, not numbers, so I updated that as well.
$(function() {
let maxMarks = 0, passMarks = 0, marksAwarded = 0, hasFail = false;
$("tr").each(function() {
$(this).find('td').each(function(index) {
let val = +$(this).text().trim();
if (index === 2) maxMarks += val;
else if (index === 3) passMarks += val;
else if (index === 4) marksAwarded += val;
});
if (+$(this).find('td').eq(4).text() < +$(this).find('td').eq(3).text()) hasFail = true;
});
$('#fulltotal').html(maxMarks);
$('#passtotal').html(passMarks);
$('#obtotal').html(marksAwarded);
if (marksAwarded < passMarks || hasFail) {
$('#results').html("FAIL");
} else {
$('#results').html("PASS");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<table class='table'>
<thead>
<tr>
<th>Code</th>
<th>Subject / Course Title</th>
<th>Maximum Marks</th>
<th>Pass Marks</th>
<th>Marks Awarded</th>
</tr>
</thead>
<tbody>
<tr class="body-data">
<td>1</td>
<td>maths
</td>
<td id="data">100</td>
<td id="data1">33</td>
<td id="data2">54</td>
</tr>
<tr class="body-data">
<td>2</td>
<td>english
</td>
<td id="data">100</td>
<td id="data1">33</td>
<td id="data2">12</td>
</tr>
<tr class="body-data">
<td>3</td>
<td>science
</td>
<td id="data">100</td>
<td id="data1">33</td>
<td id="data2">74</td>
</tr>
<tr class="body-data">
<td>4</td>
<td>social science
</td>
<td id="data">100</td>
<td id="data1">33</td>
<td id="data2">0</td>
</tr>
</tbody>
<tfoot>
<tr class="total-data">
<td></td>
<td style="text-align: right; padding-right: 10px;">TOTAL </td>
<td style="border-top: 2px solid #2193b0!important;" id="fulltotal"></td>
<td style="border-top: 2px solid #2193b0!important;" id="passtotal"></td>
<td style="border-top: 2px solid #2193b0!important;" id="obtotal"></td>
</tr>
</tfoot>
</table>
Result: <strong id='results'></strong>
Upvotes: 1