Question

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

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

?>

每件事情都很好，看起来很好，直到它到达这一行

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

这就是我得到4个错误的地方所有人都说同样的事情：

未捕获的TypeError：无法设置null
的属性'innerHTML'

有什么方法可以将此目录中的文件中的文本插入到figcaption中？

Answer 1

发生此错误是因为innerHTML属性未获取要使用的元素。
很明显，您的getElementById()部分存在一些问题。问题是您在方法中使用的参数。使用代码的最佳方式是这样的：

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

并不是说我喜欢这种代码风格，但你对$char的使用都搞砸了。你在第一个循环中迭代它，但不在第二个循环中迭代...所以，第二个循环总是相同的（'N'或其他一些疯狂）。简单的解决方法是使用第二个计数器，假设$ images和$ files数组按顺序排列并匹配。

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

?>

使用php运行Javascript代码

2 个答案: