front end - Why is my JavaScript class not working in WordPress? Constructor not firing, and no changes applied to the DOM

I’m working on a WordPress site and trying to implement a JavaScript class (MobileUI) from a Webpack compiled module to handle mobile-specific UI changes. However, the class doesn’t seem to work at all. When I refresh the browser, nothing happens, and the alert() statement inside the constructor doesn’t fire. I’ve tested the alert() outside the class, and it works, but when placed inside the constructor, it doesn’t execute. I’ve also removed everything from the class except the constructor, but the issue persists.

Expected Result:

The alert() statement inside the constructor should fire when the page loads, indicating that the class is being instantiated.
The class should apply changes to the DOM (e.g., hide elements, move elements) based on the screen width.

Actual Result:

The alert() statement inside the constructor does not fire.
No changes are applied to the DOM.

Code: Here’s the JavaScript class I’m using (/src/mobile_ui_changes.js):

export default class MobileUI {
    constructor(ui_body, scrW_min, scrW_max) {
        alert("Hello, I am mobile UI"); // This alert does not fire
        // Properties
        this.body = document.querySelector(ui_body);
        this.sidebar = this.body.querySelector('.sidebar');
        this.shoppingMenu = this.body.querySelector('.shopping-menu-wrapper .shopping-menu');
        this.shoppingActions = this.shoppingMenu.querySelector('.menu-icon');
        this.scrW_min = scrW_min;
        this.scrW_max = scrW_max;
        this.prodViews = this.body.querySelectorAll('.child-cat-content .child-cat-header .view-icons .view-icon');
        this.targetProdViews = this.body.querySelector('.view-icons #view-stacked, .view-icons #view-tile');

        // Methods
        this.hide_shopping_menu();
        this.hide_specified_views();
        this.move_shopping_actions();
    }

    hide_specified_views() {
        this.prodViews.forEach(view => {
            const viewInvisible = 'viewInvisible';
            view.classList.toggle(viewInvisible);
        });
    }

    move_shopping_actions() {
        if (!this.sidebar.contains(this.shoppingActions)) {
            this.sidebar.appendChild(this.shoppingActions);
        } else {
            this.body.appendChild(this.shoppingActions);
        }
    }

    hide_shopping_menu() {
        const screenWidth = window.innerWidth;
        if (screenWidth >= this.scrW_min && screenWidth <= this.scrW_max) {
            this.shoppingMenu.classList.add('shopInvisible');
            this.hide_specified_views();
            this.move_shopping_actions();
        }
    }
}

How I’m Using the Class:

I’ve imported the class in my main JavaScript file:

import MobileUI from './/modules/mobile_ui_changes.js';

I’m instantiating the class after the DOM has loaded:

document.addEventListener('DOMContentLoaded', () => {
    const mobileUIChanges = new MobileUI('body', 360, 1080);
});

HTML Structure: Here’s the relevant HTML structure:

<body class="tax-product_cat">
    <div class="sidebar"><!--sidebar content--></div>
    <div class="shopping-menu-wrapper">
        <div class="shopping-menu">
            <div class="menu-icon">Shopping Actions</div>
        </div>
    </div>
    <div class="child-cat-content">
        <div class="child-cat-header">
            <div class="view-icons">
                <div class="view-icons">
                  <img id="view-stacked" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-stacked-accent.svg" alt="Stacked View">
                  <h6 class="view-heading">Stacked</h6>
                  <img id="view-tile" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-tile.svg" alt="Tile View">
                  <h6 class="view-heading">Tile</h6>
                  <img id="view-table" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-table.svg" alt="Table View">
                  <h6 class="view-heading">Table</h6>
               </div>
            </div>
        </div>
    </div>
</body>

This is how I enqueued the module (along with other modules):

function mainModules () {
    $args = array(
        'strategy' => 'async'
    );
    wp_enqueue_script('main_modules', get_theme_file_uri('/build/index.js'), array(), '1.0.0', $args);  
}
add_action('wp_enqueue_scripts', 'mainModules');

What I’ve Tried:

Placing the alert() statement outside the class: It works.
Placing the alert() statement inside the constructor: It does not work.
Removing everything from the class except the constructor: The alert() still doesn’t fire.
Checking the browser console for errors: No errors are logged.
Ensuring the DOM elements exist: The elements are present in the HTML.

Environment:

WordPress version: 6.7.2
Theme: custom theme
Libraries: Node.JS, WordPress Scripts
build tool: Webpack
Browser: Mozilla Firefox for ZorinOS 135.0 (64-bit)
Operating System: ZorinOS 17.2

Questions:

Why isn’t the constructor firing, and how can I fix it?
Are there any WordPress-specific issues that could prevent the class from working?
How can I ensure the class is instantiated correctly and applies the desired changes to the DOM?

Edit: Interestingly, I can call an alert() statement from the constructor of another module I created in the same src folder earlier.

Expected Result:

The alert() statement inside the constructor should fire when the page loads, indicating that the class is being instantiated.
The class should apply changes to the DOM (e.g., hide elements, move elements) based on the screen width.

Actual Result:

The alert() statement inside the constructor does not fire.
No changes are applied to the DOM.

Code: Here’s the JavaScript class I’m using (/src/mobile_ui_changes.js):

export default class MobileUI {
    constructor(ui_body, scrW_min, scrW_max) {
        alert("Hello, I am mobile UI"); // This alert does not fire
        // Properties
        this.body = document.querySelector(ui_body);
        this.sidebar = this.body.querySelector('.sidebar');
        this.shoppingMenu = this.body.querySelector('.shopping-menu-wrapper .shopping-menu');
        this.shoppingActions = this.shoppingMenu.querySelector('.menu-icon');
        this.scrW_min = scrW_min;
        this.scrW_max = scrW_max;
        this.prodViews = this.body.querySelectorAll('.child-cat-content .child-cat-header .view-icons .view-icon');
        this.targetProdViews = this.body.querySelector('.view-icons #view-stacked, .view-icons #view-tile');

        // Methods
        this.hide_shopping_menu();
        this.hide_specified_views();
        this.move_shopping_actions();
    }

    hide_specified_views() {
        this.prodViews.forEach(view => {
            const viewInvisible = 'viewInvisible';
            view.classList.toggle(viewInvisible);
        });
    }

    move_shopping_actions() {
        if (!this.sidebar.contains(this.shoppingActions)) {
            this.sidebar.appendChild(this.shoppingActions);
        } else {
            this.body.appendChild(this.shoppingActions);
        }
    }

    hide_shopping_menu() {
        const screenWidth = window.innerWidth;
        if (screenWidth >= this.scrW_min && screenWidth <= this.scrW_max) {
            this.shoppingMenu.classList.add('shopInvisible');
            this.hide_specified_views();
            this.move_shopping_actions();
        }
    }
}

How I’m Using the Class:

I’ve imported the class in my main JavaScript file:

import MobileUI from './/modules/mobile_ui_changes.js';

I’m instantiating the class after the DOM has loaded:

document.addEventListener('DOMContentLoaded', () => {
    const mobileUIChanges = new MobileUI('body', 360, 1080);
});

HTML Structure: Here’s the relevant HTML structure:

<body class="tax-product_cat">
    <div class="sidebar"><!--sidebar content--></div>
    <div class="shopping-menu-wrapper">
        <div class="shopping-menu">
            <div class="menu-icon">Shopping Actions</div>
        </div>
    </div>
    <div class="child-cat-content">
        <div class="child-cat-header">
            <div class="view-icons">
                <div class="view-icons">
                  <img id="view-stacked" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-stacked-accent.svg" alt="Stacked View">
                  <h6 class="view-heading">Stacked</h6>
                  <img id="view-tile" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-tile.svg" alt="Tile View">
                  <h6 class="view-heading">Tile</h6>
                  <img id="view-table" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-table.svg" alt="Table View">
                  <h6 class="view-heading">Table</h6>
               </div>
            </div>
        </div>
    </div>
</body>

This is how I enqueued the module (along with other modules):

function mainModules () {
    $args = array(
        'strategy' => 'async'
    );
    wp_enqueue_script('main_modules', get_theme_file_uri('/build/index.js'), array(), '1.0.0', $args);  
}
add_action('wp_enqueue_scripts', 'mainModules');

What I’ve Tried:

Placing the alert() statement outside the class: It works.
Placing the alert() statement inside the constructor: It does not work.
Removing everything from the class except the constructor: The alert() still doesn’t fire.
Checking the browser console for errors: No errors are logged.
Ensuring the DOM elements exist: The elements are present in the HTML.

Environment:

WordPress version: 6.7.2
Theme: custom theme
Libraries: Node.JS, WordPress Scripts
build tool: Webpack
Browser: Mozilla Firefox for ZorinOS 135.0 (64-bit)
Operating System: ZorinOS 17.2

Questions:

Why isn’t the constructor firing, and how can I fix it?
Are there any WordPress-specific issues that could prevent the class from working?
How can I ensure the class is instantiated correctly and applies the desired changes to the DOM?

Edit: Interestingly, I can call an alert() statement from the constructor of another module I created in the same src folder earlier.

Share Improve this question edited 13 hours ago fuxia♦ 107k38 gold badges255 silver badges459 bronze badges asked 18 hours ago BrigantiumXIX 133 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

You need to enqueue the script in WordPress, you typically use the wp_enqueue_script() function in your theme or plugin. This function ensures that your scripts are added to your WordPress site in the proper order and only when necessary.

Here’s the general process for enqueuing a script:

Open your theme's functions.php file (or the appropriate file in your plugin).

Use the wp_enqueue_script() function to add your JavaScript file.

Here’s an example of how to enqueue a script:

function my_custom_scripts() {
// Enqueue a custom JavaScript file
wp_enqueue_script(
    'my-custom-script',          // Handle for the script
    get_template_directory_uri() . '/js/custom-script.js', // Path to the script
    array('jquery'),             // Dependencies (optional, e.g., jQuery)
    null,                        // Version number (optional, set to null to avoid versioning)
    true                         // Whether to load the script in the 
    footer (true) or the header (false)
   );
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

Breakdown of wp_enqueue_script() parameters:

Handle: A unique name for the script. In this example, it's 'my-custom-script'. Source: The location of your JavaScript file. In the example above, it’s located in the js folder of the theme directory.

Dependencies: This is an array of other scripts that need to be loaded before your script. In this case, it’s jQuery (optional).

Version: You can specify a version number for your script or set it to null to let WordPress handle it automatically.

In Footer: A true value loads the script in the footer, which is usually preferred for performance reasons, while false would load it in the header.

Common Tips: Ensure your file path is correct: Use get_template_directory_uri() for the theme or plugin_dir_url(FILE) for a plugin.

Minify scripts for production: It’s a good practice to minify JavaScript files before enqueuing them on your site for better performance. Let me know if you need help with any specific part of the process!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

front end - Why is my JavaScript class not working in WordPress? Constructor not firing, and no changes applied to the DOM

1 Answer 1

与本文相关的文章

评论列表(0)