javascript - 将 PHP 代码添加到动态生成的 HTML 数据中

Question

我正在尝试创建一个网站，该网站基本上有很多按钮，这些按钮将在单击时执行特定的 PHP 文件，并在同一屏幕上的空框中显示其结果。这些 PHP 文件位于与 index.php 同一目录中的目录 test_scripts 中。

我认为明显的步骤是创建一个循环来迭代这些文件并动态创建它们的 ui。所以我在index.php

中间编写了以下PHP代码

#Index.php
...
 <?php
    $dir_itr = new DirectoryIterator("test_scripts");
    foreach ($dir_itr as $file) {
        if ($file->isFile()) {

            $filename = $file->getFilename();
            $formattedFileName =
                '<button
                     class="box button is-large is-fullwidth is-primary is-light"
                     onclick="loadScriptFileData($filename)">
                               $filename
                 </button>';
            print $formattedFileName;
        }
    }
?>
...

loadScriptFileData() 是一个 JavaScript 函数，写在 head 中的 script 标签中:

<!--index.php-->

<script>
    function loadScriptFileData(filename) {
        alert(filename);
    }
</script>

for every 循环运行正常，但 JavaScript 函数和生成的 HTML 无法正常工作。页面上有预期数量的按钮，但每个按钮的名称仅为单词 "$filename"，而不是实际预期的文件名。 JavaScript 的情况更糟，它直接不起作用，并在控制台中给出错误 Uncaught ReferenceError: $filename is not Define at HTMLButtonElement.onclick ((index):71)

为什么 $variable 没有转换为字符串？我什至尝试了 toString() 函数，但仍然不好。我做错了吗？

Answer 1

使用单引号时不会解析/解释变量。

替换

$formattedFileName= '<button 
  class="box button is-large is-fullwidth is-primary is-light" 
  onclick="loadScriptFileData($filename)">$filename</button>';

与

$formattedFileName= "<button 
  class=\"box button is-large is-fullwidth is-primary is-light\" 
  onclick=\"loadScriptFileData('$filename')\">$filename</button>";

一切都应该按预期工作。