Wordpress 自定义主题 - javascript 无法读取我页面上的任何元素

Question

一般来说，我是 wordpress 和 javascript 的新手。 我试图用 javascript 替换我的 front-page.php 中点击的一些文本，但我无法让我的 javascript 文件读取我的任何页面上的任何元素。

这是将 javascript 文件包含在函数中的代码。php，我正在复制所有内容以防万一。

function himatekpendupi_scripts() {
    wp_enqueue_style( 'himatekpendupi-style', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_style( 'himatekpendupi-main', get_template_directory_uri() . '/css/main.css' );
    wp_enqueue_style( 'bootstrap-icons', 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' );
    
    wp_style_add_data( 'himatekpendupi-style', 'rtl', 'replace' );

    wp_enqueue_script( 'himatekpendupi-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
    wp_enqueue_script( 'bootstrap-popper', 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js', array('jquery') );
    wp_enqueue_script( 'bootstrap-script', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js', array('jquery') );
    wp_enqueue_script( 'himatekpendupi-script', get_template_directory_uri() . '/js/script.js', array('jquery') );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'himatekpendupi_scripts' );

这是 script.js 中的代码

const desc = document.getElementById("bidang-desc");
const header = document.getElementById("masthead");
console.log("test");
console.log(desc);
console.log(header);

desc.innerHTML = '';
desc.appendChild(document.createTextNode("My new text!"));

这是控制台 output

test 
null 
null 
script.js?ver=5.9.3:5 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at script.js?ver=5.9.3:5:16

编辑：从我的 header.php 添加代码

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package himatekpendupi
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">

    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'himatekpendupi' ); ?></a>
    <header id="masthead" class="site-header shadow-sm">
        <div class="container pt-2 pb-2">
            <div class="row d-flex justify-content-between align-items-center">
                <div class="col site-header__logo d-flex align-items-center">
                    <?php the_custom_logo(); ?>
                    <a href="http://himatekpendupi.local/" id="title">HIMA Teknologi Pendidikan</a>
                </div>
                <nav id="site-navigation-lg" class="col-6 d-inline-flex justify-content-end main-navigation">
                    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'himatekpendupi' ); ?></button>
                    <?php
                    wp_nav_menu(
                        array(
                            'theme_location' => 'menu-1',
                            'menu_id'        => 'primary-menu',
                        )
                    );
                    ?>
                </nav><!-- #site-navigation -->
            </div>
            <nav id="site-navigation" class="col pt-2 pb-2 d-flex justify-content-center align-items-center main-navigation">
                    <button class="menu-toggle d-flex align-items-center" aria-controls="primary-menu" aria-expanded="false"> <!- making this flex cause the button to appear on large view port -->
                        <i class="bi bi-list"></i>
                        <?php esc_html_e( 'Menu', 'himatekpendupi' ); ?>
                    </button>
                    <?php
                    wp_nav_menu(
                        array(
                            'theme_location' => 'menu-1',
                            'menu_id'        => 'primary-menu',
                        )
                    );
                    ?>
            </nav>
        </div>
    </header><!-- #masthead -->

我错过了什么？ 任何帮助是极大的赞赏。

Answer 1

您可能希望先注册一个脚本，然后再将其加入队列。 这样就干净多了。 另外，为 styles 和 js 创建单独的函数。

无论如何，我希望您的代码在填充 DOM 之前运行，即在您要查找的 2 个元素存在之前运行。

Answer 2

在您的 header.php 代码中，没有bidang-desc的 ID，这就是它抛出null错误的原因。

关于masthead ID，我会在尝试抓取元素之前检查 window 是否已完全加载。

window.addEventListener('load', function() {
    
    // Once page is loaded, grab the elements
    const desc = document.getElementById("bidang-desc"); // This element isn't in header.php so it will return null
    const header = document.getElementById("masthead");

    // Code goes here

});

Wordpress 自定义主题 - javascript 无法读取我页面上的任何元素

问题描述

2 个解决方案

解决方案1
0 2022-04-15 17:26:51

解决方案2
0 已采纳 2022-04-15 19:08:28

Wordpress 自定义主题 - javascript 无法读取我页面上的任何元素

问题描述

2 个解决方案

解决方案1 0 2022-04-15 17:26:51

解决方案2 0 已采纳 2022-04-15 19:08:28

解决方案1
0 2022-04-15 17:26:51

解决方案2
0 已采纳 2022-04-15 19:08:28