run Javascript code using php

Question

I'm trying to get files from a text files in a directory and show them inside a figcaption tag. I tried to echo a javascript code to get the figcaption by id and change the innerHTML however that doesn't work my code is

<?php
$images = glob("upload_pic//*.png");
 $files = glob("bio//*.txt");
$char = 'A'; 
$char <= 'Z';
foreach(array_reverse($images) as $image) {
echo '<figure>';
echo '<img onload="fadeIn(this)" src="'.$image.'"  style="display:none;"/>';
echo '<figcaption id="'.$char.'"></figcaption>';
echo '</figure>';
 $char++;
 }
foreach(array_reverse($files) as  $index => $file) {
echo '<script>';
echo 'setTimeout(function(){ document.getElementById("'.$char.'").innerHTML ="hello"; }, 3000);';
echo '</script>';
}

?>

Every thing works fine and looks good until it reaches this line

echo 'setTimeout(function(){ document.getElementById("'.$char.'").innerHTML ="hello"; }, 3000);';

and that's where I get 4 errors all saying the same thing:

Uncaught TypeError: Cannot set property 'innerHTML' of null

Is there any way that I could insert the text from the files in this directory into the figcaption?

Answer 1

This error occurs because innerHTML property is not getting an element to work for.
It is clear, you have some problem in your getElementById() section. And the problem is the parameter you are using within the method. Best way to use your code is like this :

<?php
$images = glob("upload_pic//*.png"); $files = glob("bio//*.txt");
$char = 'A'; $i = 'A';

foreach(array_reverse($images) as $image) { ?>

 <figure>
  <img onload="fadeIn(this)" src="<?php echo $image; ?>" style="display:none"/>
<figcaption id="<?php echo $char;"></figcaption>
</figure>

<?php $char++; }

foreach(array_reverse($files) as  $index => $file) { ?>

<script>
setTimeout(function(){ document.getElementById("<?php echo $i++ ?>").innerHTML ="hello"; }, 3000);
</script>

<?php } ?>

Answer 2

Not that I'm a fan of this style of code, but your use of $char is all screwed up. You iterate through it on the first loop, but not on the second... so, the second loop is always the same ('N' or some other craziness). Easy fix is to use a second counter, assuming that the $images and $files array are in order together and match up.

<?php
$images = glob("upload_pic//*.png");
 $files = glob("bio//*.txt");
$char = 'A'; 
$char2 = 'A';
foreach(array_reverse($images) as $image) {
    echo '<figure>';
    echo '<img onload="fadeIn(this)" src="'.$image.'"  style="display:none;"/>';
    echo '<figcaption id="'.$char++.'"></figcaption>';
    echo '</figure>';
}
foreach(array_reverse($files) as  $index => $file) {
    echo '<script>';
    echo 'setTimeout(function(){ document.getElementById("'.$char2++.'").innerHTML ="hello"; }, 3000);';
    echo '</script>';
}

?>