Question 30259 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress custom theme – javascript can't read any element on any of my page

I’m new to wordpress and javascript in general. I’m trying to replace some text on click in my front-page.php with javascript but I can’t make my javascript file to read any element on any of my page.

this is the code to include the javascript file in functions.php, I’m copying everything just in case its relevant.

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/[email protected]/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/[email protected]/dist/umd/popper.min.js', array('jquery') );
    wp_enqueue_script( 'bootstrap-script', 'https://cdn.jsdelivr.net/npm/[email protected]/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' );

here is the code in 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!"));

this is the console 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

edit: added code from my 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 -->

What did I miss? Any help is greatly appreciated.

Tags:

2

Answers


  1. 0

    You may want to look into registering a script first, enqueueing it later. That’s a lot cleaner. Also, create individual functions for styles and js.

    Anyhow, I expect your code runs before the DOM is populated, i.e. before the 2 elements you’re looking for exist.

    Login or Signup to reply.
  2. 0

    In your header.php code, there isn’t an ID of bidang-desc so that is why it’s throwing a null error.

    In regard to the masthead ID, I would check the window fully loads before trying to grab the elements.

    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

});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search