Cannot get element id in javascript inside for loop

Question

I am trying to use getElementById() inside loop as the id of my each div I want to get is in sequence like total_comments1, total_comments2, total_comments3,.. and so on. This ids are assigned by output using php.

Here is my code to display my div:

<?php
    $i=0;
    while( $row = mysqli_fetch_assoc($ret) ):
        $i++;
    ?>
        <tr>
            <td class="col3 col">
                <div id="<?php echo "total_comments".$i ?>"></div>
            </td>
        </tr>

Here is my javascript code:

<script>
    for(var i in (result.response)) {
        var a=document.getElementById("total_comments" + i );
        a.innerHTML = result.response[i].posts;
    }
</script>

When I use only "total_posts" in document.getElementBy ID it does not give any error. But when I use "total_posts"+i it gives error on next line. Cannot set property 'innerHTML' of null

can you check the generated html to see what is are id attribute values — Arun P Johny
– Arun P Johny, Commented Apr 20, 2016 at 10:19
Yes, I have checked the id attribute values of div. They as I have mentioned above total_comments1, total_comments2,... — Neerali Acharya
– Neerali Acharya, Commented Apr 20, 2016 at 10:22
I did checked value of i by console.log() and it is like 0,1,2,3,.. — Neerali Acharya
– Neerali Acharya, Commented Apr 20, 2016 at 10:31

Pupil · Accepted Answer · 2016-04-20 10:25:05Z

5

Array have starting index from 0.

In your case, you are incrementing $i before assigning.

That is causing your ids start from 1 not 0

You should increment it after assigning.

Corrected code:

<?php
$i=0;
while ($row = mysqli_fetch_assoc($ret)):
?>
 <tr>
  <td class="col3 col">
   <div id="<?php echo "total_comments".$i ?>"></div>
  </td>
 </tr>
<?php
 $i++;
endwhile;
?>

answered Apr 20, 2016 at 10:25

Pupil

24k6 gold badges50 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Neerali Acharya Over a year ago

You please read my php code again. I have initialized $i to 0 then at starting of loop I am incrementing it.

Pupil Over a year ago

@NiraliAcharya, I have given you an approach to solve your question. It does not mean, it is perfect or you must follow it. It was just my observation. You can continue with your own code.

Neerali Acharya Over a year ago

Sorry for that. But you see above I am incrementing variable i at loop starting.

Pupil Over a year ago

@NiraliAcharya, as per my little knowledge, that is the issue. If you view source of your HTML, you can easily find it out.

Neerali Acharya Over a year ago

This is my html output: <td class="col3 col"><div id="total_comments1"></td></div>

|

jackomelly · Accepted Answer · 2016-04-20 10:27:14Z

2

The problem is on your php cycle, try to change it like this:

<?php
  $i=0;
  while($row = mysqli_fetch_assoc($ret) {
    echo '<tr><td class="col3 col">'
      .'<div id="total_comments'.$i.'"></div>'
      .'</td></tr>';
    $i++;
  }
?>

answered Apr 20, 2016 at 10:27

jackomelly

5431 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Cannot get element id in javascript inside for loop

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related