javascript - 来自 php 文件的 xampp 脚本不会转移到 html 文件

标签 javascript php html

<分区>

我有一个 php 文件,其中包含一个切换可见性的按钮

echo "<button onclick = \"toggle('showDetails')\">expand</button>" ;

echo "<script type=\"text/javascript\">";
echo "   function toggle(id) { \n";
echo "       var e = document.getElementById(id)\n";
echo "       if(e.style.display == 'block')\n";
echo "          e.style.display = 'none';\n";
echo "       else\n";
echo "          e.style.display = 'block';\n";
echo "    }";
echo " </script>";

它在我的 php 页面上运行得非常好。但是当我转到调用我的 php 页面的 html 页面时,脚本不起作用。我尝试将我的脚本放在 html 页面的标题和 html 页面的主体中,但无济于事。我需要做什么才能让我的按钮在 html 页面上工作。

编辑: 这是 showDetails 元素:

echo "<div id =\"showDetails\" style=\"display:none\">" ;
echo "<strong>client_address:</strong>" ;
echo $client_address;
echo "<br>" ;
echo "<strong>client_date:</strong>" ;
echo $client_date;
echo "</div>" ;

我还打开了我的 html 页面并使用了 google chrome 检查器。当我点击 html 页面上的按钮时,我在控制台中收到错误:

未捕获的 ReferenceError:未定义切换

最佳答案

当您通过 ajax 风格的方法(使用 XMLHttpRequest)调用此 php 文件并使用赋值给innerHTMLscript标签中嵌入的javacscript将不会执行。在您的情况下,这意味着永远不会定义 toggle 函数。

有几种方法可以解决这个问题:

  • 在发出此 http 请求的 HTML 页面中定义 toggle 函数。这样,具有此功能的 script 标记将从一开始就存在,并在页面加载时执行。 toggle 函数只是坐在那里什么也不做并不重要,直到您调用 menu.php 文件,它会发回按钮。

  • 使用jQuery 或具有执行此类http 请求的功能的类似库执行嵌入式脚本中的任何内容标签。

对于第二个选项,你可以这样写:

$("#menuDiv").load("menu.php");

还有其他几种方法可以实现这一点,我引用了 many previous answers对于这个问题。

另请注意,javascript 中的 else 之前有一个分号会破坏您的 if-else构造:

echo "          e.style.display = 'none';\n";

改为:

echo "          e.style.display = 'none'\n";

关于javascript - 来自 php 文件的 xampp 脚本不会转移到 html 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33702778/

相关文章:

php - 如何正确地将 mySQL 查询转换为 PDO

javascript - 我如何 &lt;input type ="text"onchange sql 查询?

javascript - 如何在 AngularJs ui-select-match 元素中的最终 html 元素上应用类?

javascript - jsperf 替代方案适用于 IE 吗?

javascript - 了解 JavaScript 堆增长和 GC 模式

javascript - 使用 Jquery 从两个下拉菜单中填充输入

javascript - WebGL:GL 错误:GL_INVALID_OPERATION:glDrawElements:尝试访问属性 0 中超出范围的顶点

php - 获取表格行的正则表达式

html - 图像不在中间

javascript - 当ID相同时,从列表中获取单个值