Onclick 功能“未定义”答案

【问题标题】：Onclick function "is not defined"Onclick 功能“未定义”
【发布时间】：2016-10-29 07:33:45
【问题描述】：

我对 wordpress 还很陌生，正在尝试定义和调用一个函数，但无法让它工作。

以下代码出现在使用 get_template_part 从 content.php 文件调用的 php 文件中。

<div onclick="checkAllTopicCheckBoxes()"> </div>

我在function.php文件的底部添加了如下代码：

function checkAllTopicCheckBoxes() {
    alert("Hello! I am an alert box!!");
}

当我点击它返回的元素时：

(index):363 Uncaught ReferenceError: checkAllTopicCheckBoxes 未定义。

谁能帮帮我？

【问题讨论】：

这是关于你的功能的位置！
这个checkAllTopicCheckBoxes函数是在同一个脚本文件上还是在不同文件上？
将代码添加到文件顶部
我只是将函数剪切并粘贴到 js 文件的末尾并且它起作用了。

标签： javascript php jquery wordpress

【解决方案1】：

使用 OnClick 或类似属性是非常糟糕的做法。

使用 Javascript 事件监听器是一种更好的方法。以现代方式注册事件是处理事件的unobtrusive way。此外，要为目标注册多个事件侦听器，您可以为同一目标调用 addEventListener()。

HTML：

<div id="checkAllTopicCheckBoxes"> </div>

您的 JavaScript 应该如下所示：

document.getElementById ("checkAllTopicCheckBoxes").addEventListener ("click", myFunction, false);

function myFunction() {
  alert("Hello! I am an alert box!!");
}

HTML 属性（如 Onclick）应避免使用，因为它涉及内容/结构和行为没有很好地分离，使错误更难找到。

【讨论】：

@srMarquinho 请不要将美国英语拼写转换为英国英语，反之亦然。
这个 bug 有多难找到？对我来说，如果我可以使用“检查元素”并通过单击元素进行调试..那么我可以最简单地看到附加到 onclick 的功能。转到代码，然后搜索该函数名称，我就在那儿……不知道为什么很多人说使用 onClick 是不好的做法。
不回答问题
自动声称“onclick=”的人是不好的做法……就像在 OOP 中提到“static”关键字时会产生过敏反应的人一样。尽管函数式编程表明他们的观点可以说是错误的并且上下文就是一切，但他们根深蒂固的观点被视为福音。不要被编程范式狂热者所欺骗。
那又怎样？ OP 没有询问最佳实践。

【解决方案2】：

你写的是一个Javascript函数，它必须被HTML代码包围。你写过你的函数吗：

echo('<script>function checkAllTopicCheckBoxes() { alert("Hello! I am an alert box!!");}</script>');

另外，我认为 Wordpress 必须有一些功能可以用来添加脚本。试试看wp_enqueue_script (string $handle, string $src = false, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false);

编辑：我刚刚发现了这个问题，它可能会回答你的问题：How to write a Javascript function inside the functions.php of Wordpress?

【讨论】：

【解决方案3】：

function checkAllTopicCheckBoxes() {
    alert("Hello! I am an alert box!!");
}

必须不在<? ... ?> 中并且必须有<script>...</script> 换行，例如，

======== sample.php =======
<? 
// php script is here
?>

<script>
function checkAllTopicCheckBoxes() {
  alert("Hello! I am an alert box!!");
}
</script>

或者如果你想在php脚本中包含js，你必须像这样echo它

======== sample.php =======
<? 
// php script is here

echo '<script>';
echo 'function checkAllTopicCheckBoxes() {';
echo '  alert("Hello! I am an alert box!!");';
echo '}';
echo '</script>';

?>

【讨论】：

【解决方案4】：

我遇到了和你一样的错误。

如果我们使用 onclick html 属性，我们需要在同一个 html 元素中定义那个 onclick 函数（通过使用标签）。

最好使用 javascript/jquery 创建点击事件监听器，而不是使用 onclick html 属性。

【讨论】：

这不是答案

【解决方案5】：

确保您的 JavaScript 函数定义在调用该方法的 html 元素之上：

<script>
function checkAllTopicCheckBoxes() 
{
    alert("Hello! I am an alert box!!");
}
</script>

<div onclick="checkAllTopicCheckBoxes()"> </div>

谢谢

【讨论】：