Wordpress custom theme - javascript can't read any element on any of my page-CodePudding

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" >
    <a  href="#primary"><?php esc_html_e( 'Skip to content', 'himatekpendupi' ); ?></a>
    <header id="masthead" >
        <div >
            <div >
                <div >
                    <?php the_custom_logo(); ?>
                    <a href="http://himatekpendupi.local/" id="title">HIMA Teknologi Pendidikan</a>
                </div>
                <nav id="site-navigation-lg" >
                    <button  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" >
                    <button  aria-controls="primary-menu" aria-expanded="false"> <!- making this flex cause the button to appear on large view port -->
                        <i ></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.

CodePudding user response：

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

});

CodePudding user response：

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.