How to fix JS Files not working in Understrap Child theme

Question

I am using the Understrap Child theme to build my site. All my CSS files are working properly but my JS files are not working. I have the following code in my Html

<script src="/js/jquery.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/animsition.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script> 

My enqueue.php file has the following code

<?php
/**
 * Understrap enqueue scripts
 *
 * @package Understrap
 */

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

if ( ! function_exists( 'understrap_scripts' ) ) {
    /**
     * Load theme's JavaScript and CSS sources.
     */
    function understrap_scripts() {
        // Get the theme data.
        $the_theme         = wp_get_theme();
        $theme_version     = $the_theme->get( 'Version' );
        $bootstrap_version = get_theme_mod( 'understrap_bootstrap_version', 'bootstrap4' );
        $suffix            = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';

        // Grab asset urls.
        $theme_styles  = "/css/theme{$suffix}.css";
        $theme_scripts = "/js/theme{$suffix}.js";
        if ( 'bootstrap4' === $bootstrap_version ) {
            $theme_styles  = "/css/theme-bootstrap4{$suffix}.css";
            $theme_scripts = "/js/theme-bootstrap4{$suffix}.js";
        }

        $css_version = $theme_version . '.' . filemtime( get_template_directory() . $theme_styles );
        wp_enqueue_style( 'understrap-styles', get_template_directory_uri() . $theme_styles, array(), $css_version );

        wp_enqueue_script( 'jquery' );

        $js_version = $theme_version . '.' . filemtime( get_template_directory() . $theme_scripts );
        wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . $theme_scripts, array(), $js_version, true );

        wp_enqueue_script( 'carousel-scripts', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), $theme_version, true ); 
        wp_enqueue_script( 'popup-scripts', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array(), $theme_version, true ); 
        wp_enqueue_script( 'wow-scripts', get_template_directory_uri() . '/js/wow.min.js', array(), $theme_version, true ); 
        wp_enqueue_script( 'pagepiling-scripts', get_template_directory_uri() . '/js/jquery.pagepiling.min.js', array(), $theme_version, true ); 
        wp_enqueue_script( 'smoothscroll-scripts', get_template_directory_uri() . '/js/smoothscroll.js', array(), $theme_version, true ); 
        wp_enqueue_script( 'validate-scripts', get_template_directory_uri() . '/js/jquery.validate.min.js', array(), $theme_version, true ); 
        wp_enqueue_script( 'jquery-scripts', get_template_directory_uri() . '/js/jquery.min.js', array(), $theme_version, true ); 


        if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
            wp_enqueue_script( 'comment-reply' );
        }
    }
} // End of if function_exists( 'understrap_scripts' ).

add_action( 'wp_enqueue_scripts', 'understrap_scripts' );

I have copied the inc folder from parent theme to the child theme and modified my functions.php file as follows

<?php
/**
 * Understrap Child Theme functions and definitions
 *
 * @package UnderstrapChild
 */

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;


// UnderStrap's includes directory.
$understrap_inc_dir = get_stylesheet_directory() . '/inc';

// Array of files to include.
$understrap_includes = array(
    '/theme-settings.php',                  // Initialize theme default settings.
    '/setup.php',                           // Theme setup and custom theme supports.
    '/widgets.php',                         // Register widget area.
    '/enqueue.php',                         // Enqueue scripts and styles.
    '/template-tags.php',                   // Custom template tags for this theme.
    '/pagination.php',                      // Custom pagination for this theme.
    '/hooks.php',                           // Custom hooks.
    '/extras.php',                          // Custom functions that act independently of the theme templates.
    '/customizer.php',                      // Customizer additions.
    '/custom-comments.php',                 // Custom Comments file.
    '/class-wp-bootstrap-navwalker.php',    // Load custom WordPress nav walker. Trying to get deeper navigation? Check out: https://github.com/understrap/understrap/issues/567.
    '/editor.php',                          // Load Editor functions.
    '/deprecated.php',                      // Load deprecated functions.
);

// Load WooCommerce functions if WooCommerce is activated.
if ( class_exists( 'WooCommerce' ) ) {
    $understrap_includes[] = '/woocommerce.php';
}

// Load Jetpack compatibility file if Jetpack is activiated.
if ( class_exists( 'Jetpack' ) ) {
    $understrap_includes[] = '/jetpack.php';
}

// Include files.
foreach ( $understrap_includes as $file ) {
    require_once $understrap_inc_dir . $file;
}

/**
 * Removes the parent themes stylesheet and scripts from inc/enqueue.php
 */
function understrap_remove_scripts() {
    wp_dequeue_style( 'understrap-styles' );
    wp_deregister_style( 'understrap-styles' );

    wp_dequeue_script( 'understrap-scripts' );
    wp_deregister_script( 'understrap-scripts' );
}
add_action( 'wp_enqueue_scripts', 'understrap_remove_scripts', 20 );



/**
 * Enqueue our stylesheet and javascript file
 */
function theme_enqueue_styles() {

    // Get the theme data.
    $the_theme = wp_get_theme();

    $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
    // Grab asset urls.
    $theme_styles  = "/css/child-theme{$suffix}.css";
    $theme_scripts = "/js/child-theme{$suffix}.js";

    wp_enqueue_style( 'child-understrap-styles', get_stylesheet_directory_uri() . $theme_styles, array(), $the_theme->get( 'Version' ) );
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'child-understrap-scripts', get_stylesheet_directory_uri() . $theme_scripts, array(), $the_theme->get( 'Version' ), true );
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );



/**
 * Load the child theme's text domain
 */
function add_child_theme_textdomain() {
    load_child_theme_textdomain( 'understrap-child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'add_child_theme_textdomain' );



/**
 * Overrides the theme_mod to default to Bootstrap 5
 *
 * This function uses the `theme_mod_{$name}` hook and
 * can be duplicated to override other theme settings.
 *
 * @param string $current_mod The current value of the theme_mod.
 * @return string
 */
function understrap_default_bootstrap_version( $current_mod ) {
    return 'bootstrap5';
}
add_filter( 'theme_mod_understrap_bootstrap_version', 'understrap_default_bootstrap_version', 20 );



/**
 * Loads javascript for showing customizer warning dialog.
 */
function understrap_child_customize_controls_js() {
    wp_enqueue_script(
        'understrap_child_customizer',
        get_stylesheet_directory_uri() . '/js/customizer-controls.js',
        array( 'customize-preview' ),
        '20130508',
        true
    );
}
add_action( 'customize_controls_enqueue_scripts', 'understrap_child_customize_controls_js' );

What I have in my Chrome developer tools is this

I have my js files in the js folder of Understrap child theme and not the one under src folder.

Answer 1

you have to use get_stylesheet_directory_uri() instead of get_template_directory_uri()

get_template_directory_uri return always main Theme Uri.