Onclick 函数“未定义”

Question

我对 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 未定义。

任何人都可以帮助我吗？

Answer 1

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

使用 Javascript 事件侦听器是一种更好的方法。 以现代方式注册事件是处理事件的不显眼的方式。 此外，要为目标注册多个事件侦听器，您可以为同一目标调用 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），因为它涉及内容/结构和行为没有很好地分离，从而更难找到错误。

Answer 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);

编辑：我刚刚发现了这个问题，它可能会回答你的问题： 如何在Wordpress的functions.php中编写一个Javascript函数？

Answer 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>';

?>

Answer 4

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

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

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

Answer 5

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

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

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

谢谢