使用php运行Javascript代码

问题描述：

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?

我正在尝试从目录中的文本文件中获取文件并将其显示在figcaption标记内。我试图回应一个javascript代码来获取id的figcaption并更改innerHTML但是这不起作用我的代码是 p>

   ＆lt;？php 
 $ images = glob（“upload_pic // * .png”）; 
 $ files = glob（“bio // * .txt”）; 
 $ char ='A';  
 $ char＆lt; ='Z'; 
foreach（array_reverse（$ images）as $ image）{
echo'＆lt; figure＆gt;'; 
echo'＆lt; img onload =“fadeIn（this）”src =“  '。$ image。'“style =”display：none;“/＆gt;'; 
echo'＆lt; figcaption id =”'。$ char。'“＆gt;＆lt; / figcaption＆gt;'; 
echo'＆lt;  / figure＆gt;'; 
 $ char ++; 
} 
 
nachach（array_reverse（$ files）as $ index =＆gt; $ file）{
echo'＆lt; script＆gt;'; 
echo'setTimeout（function（）{document  .getElementById（“'。$ char。'”）。innerHTML =“hello”;}，3000）;'; 
echo'＆lt; / script＆gt;'; 
} 
 
？＆gt; 
  代码>  pre> 
 
 
 
 每件事情都很好，看起来很好，直到它到达这一行 p> 
 
 
   echo'setTimeout（function（）{document.getElementById（“'。$ char。'”）。innerHTML =“hello”;}，3000）;'; 
  code>  pre> 
  
 
 
 这就是我得到4个错误的地方都说同样的事情： p> 
 
 
 
 未捕获TypeError：无法设置属性'innerHTML'为null  
  blockquote> 
 
 
有没有办法可以插入文件中的文字 目录进入figcaption？   p> 
  div>

答

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

?>

答

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 } ?>

相关推荐