使用php运行Javascript代码

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

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>';
}

?>