我的按钮默认点击在使用Java代码的WordPress中不起作用

时间：2020-07-17 作者：Rahul

我在页面中添加了2个按钮，并使用javascript添加了默认的按钮单击代码，但它不起作用。

This is my HTML code:

<button class="tablink" onclick="openPage(\'inside\', this, \'#0077c0\')" id="defaultOpen">Inside</button>
<button class="tablink" style="left:40px;" onclick="openPage(\'outside\', this, \'#0077c0\')" >Outside</button>

This is JS code added in functions.php:

function wp_head_custom_mm(){
?>

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

</script>
    <?php    
    }
add_action(\'wp_head\', \'wp_head_custom_mm\');
但它不工作，我的默认按钮没有单击。

错误：

未捕获的TypeError：无法读取null的属性“click”

我想按id键defaultOpen 应在网站打开时单击。

非常感谢您的帮助。

1 个回复
最合适的回答,由SO网友:WebElaine 整理而成

任何时候你想在WordPress中使用JavaScript，你都应该将其排队。

将JS另存为文件，即clickbutton.js 在主题文件夹中：

document.getElementById("defaultOpen").click();
然后在functions.php, 将该文件排队：

add_action(\'wp_enqueue_scripts\', \'wpse_371294_enqueue_js\');
function wpse_371294_enqueue_js() {
    wp_enqueue_script(\'click-button\', get_template_directory_uri() . \'/clickbutton.js\', array(\'\'), "1.0", true);
}
（如果只需要在一个页面上运行该文件，请有条件地将其排队，以便不会在其他地方加载。）

但是，请注意，您还没有设置任何触发此事件的触发器。要使这种类型的JS工作，您可能需要使用触发器，例如

jQuery( document ).ready(function() {
    document.getElementById("defaultOpen").click();
});
以便在页面完全加载时运行代码。如果这样做，还需要确保将jQuery作为依赖项将脚本排入队列：

add_action(\'wp_enqueue_scripts\', \'wpse_371294_enqueue_js\');
function wpse_371294_enqueue_js() {
    wp_enqueue_script(\'click-button\', get_template_directory_uri() . \'/clickbutton.js\', array(\'jquery\'), "1.0", true);
}
最后，您很可能可以使用CSS实现同样的效果。在默认情况下加载任何按钮，使用CSS显示而不是隐藏它，如果有人单击关闭，则使用CSS隐藏。这完全取决于您正在做什么，但通常有一种方法可以避免在初始页面状态下运行JS。

标签： javascript   html   小码农  

相关推荐

ServerSideRender不在Gutenberg块内呈现“预览”html

在过去的两天里，我一直在用这个来拉扯我的头发，搜索并没有找到任何解决问题的方法。我想用<serverSideRender /> 在前端加载动态内容，并在Gutenberg编辑器中查看生成的内容。我用Gutenberg doc page. 以下是JS代码：const { registerBlockType } = wp.blocks; const { serverSideRender } = wp.serverSideRe