无法使用innerHTML在Wordpress中工作

Question

我正在尝试动态更改页面上某些HTML元素的内容。出于这个问题的目的，我把它归结为一些非常简单的代码：

<p id="demo" onclick="myFunction()">Click me to change.</p>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Changed!";
   alert(document.getElementById("demo").innerHTML);
}
</script>

仅在简单的HTML文件中调用时才有效。但不是，如果将其放入wordpress页面。请在此处查看：https://klaerchen-coaching.de/bewerbung/dummy/

单击段落时，将调用该函数并更新<p>的内容，alert（）消息可以看到。但在屏幕上，没有任何变化。

有什么想法吗？

Answer 1

您的页面上还有另一个带有“demo”的p

它位于您要更改的“p”之前并且已更改。 因为左边你可以看到那个div是看不见的：-9999px;

如何调试：

1. 在“p”所在的行上设置chrome dev工具中的断点 改变
2. 将document.getElementById（“demo”）放入手表
3. 检查找到的“p”的父级，检查它是否是您期望的“p”

删除隐藏的“div”并再次检查。那么你的代码就可以正常工作了。

Answer 2

原因是执行被klaerchen-coaching拒绝了。 如果您在开发者控制台中单击文本，则会收到以下消息。所以你最好在开发时保持开放。

  

klaerchen-coaching.de/:120拒绝执行内联事件处理程序   因为它违反了以下内容安全策略指令：   “script-src'none'”。一个'unsafe-inline'关键字，一个哈希   （'sha256 -...'）或nonce（'nonce -...'）是启用内联所必需的   执行。

Answer 3

可能是你的jquery没有在那个页面上工作

尝试使用wp_footer（）;在footer.php

和

wp_header（）;在header.php中希望这将起作用

还检查id在该页面上使用过一次