I have no idea why i'm keep getting NaN

Question

I'm learning JavaScript. I did some code with no problems but when I want to make new code that will allow me to calculate call of my table I keep getting NaN and I don't know why.

This is my JS code

var table = document.getElementById("table"), sumVal = 0;

            for(var i = 1; i < table.rows.length; i++)
            {
                sumVal = sumVal + parseInt(table.rows[i].cells[0].innerHTML);
            }
            console.log(sumVal);
            document.getElementById("val").innerHTML =  sumVal;

This is my table

 <table id="table" class="table table-bordered">
                <thead>
                  <tr>
                    <th scope="col">Code</th>
                    <th scope="col">Prenome</th>
                    <th scope="col">Nom</th>
                    <th scope="col">Frais de inscription</th>
                    <th scope="col">Le rest</th>
                    <th scope="col">Date de paiment</th>
                    <th scope="col">dure de paiment</th>

                   </tr>
                </thead>
                <tfoot>
                   <tr>
                   <th></th>
                    <th></th>
                     <th></th>
                   <th></th>
                   <th id="val"></th>
                    <th></th>
                     <th></th>
                 </tr>
               </tfoot>
              <tbody>
                   <tr> 
                    @foreach($students as $student)

                    <th  scope="row">{{$student->id}}</th>
                    <td>{{$student->student->student_name}}</td>
                    <td>{{$student->student->student_last_name}}</td>
                    <td>{{$student->frais_inscription}}</td>
                    <td>{{$student->Rfrais_inscription}}</td>
                    <td width="140" id="xd">{{$student->payment_date->Dfrais_inscription}}</td>
                    <td >{{$student->Afrais_inscription}} Mois</td>
                    <td ></td>

                   </tr>

                   @endforeach
              </tbody>
             </table>

I have tried another way just to know what I'm missing, and it did work fine; I got the results.

Here is the code:

var table = document.getElementById("table"), sumVal = 0;

console.log(parseInt(table.rows[1].cells[4].innerHTML) + parseInt(table.rows[2].cells[4].innerHTML));

Answer 1

You need to account for when <tr> 's innerHTML is empty. parseInt("") will return NaN and you can't increment NaN so the result will just be NaN .

See below.

var table = document.getElementById("table"), sumVal = 0;

            for(var i = 1; i < table.rows.length; i++)
            {
             if (table.rows[i].cells[0].innerHTML !== ""){
                sumVal +=parseInt(table.rows[i].cells[0].innerHTML);   
            }
console.log(sumVal);
document.getElementById("val").innerHTML =  sumVal; 

Answer 2

Fill out some number and simply change your innerText to textContent . I suggest you use textContent for security concern.

Console.log() for general debug purpose.

Plain html works fine. I am not exactly sure how you fill out the number and the calculation part is executed individually before and after the filling. If it always executes after the table filling. You want to make sure you input 0 if $student->frais_inscription is empty

 var table = document.getElementById("table"), sumVal = 0; console.log(parseInt(table.rows[1].cells[4].textContent)); console.log(parseInt(table.rows[2].cells[4].textContent)); console.log(table.rows[1].cells[4]); console.log(table.rows[2].cells[4]); console.log(parseInt(table.rows[1].cells[4].textContent) + parseInt(table.rows[2].cells[4].textContent));

 <table id="table" class="table table-bordered"> <thead> <tr> <th scope="col">Code</th> <th scope="col">Prenome</th> <th scope="col">Nom</th> <th scope="col">Frais de inscription</th> <th scope="col">Le rest</th> <th scope="col">Date de paiment</th> <th scope="col">dure de paiment</th> </tr> </thead> <tfoot> <tr> <th></th> <th></th> <th></th> <th></th> <th id="val">12334</th> <th></th> <th></th> </tr> </tfoot> <tbody> <tr> @foreach($students as $student) <th scope="row">{{$student->id}}</th> <td>{{$student->student->student_name}}</td> <td>{{$student->student->student_last_name}}</td> <td>{{$student->frais_inscription}}</td> <td>1234</td> <td width="140" id="xd">{{$student->payment_date->Dfrais_inscription}}</td> <td >{{$student->Afrais_inscription}} Mois</td> <td ></td> </tr> @endforeach </tbody> </table>