[FIXED] Javascript file won't load using laragon (ERR_ABORTED 404 (Not Found))

Issue

I cannot use/access the carousel.js file - GET http://name.test/js/carousel.js net::ERR_ABORTED 404 (Not Found)

front-page.php

    <div class="row">
        <div class="col-lg-4">
            <div class="carousel_item carousel_item--visible">first post</div>
        </div>
        <div class="col-lg-4">
            <div class="carousel_item">second post</div>
        </div>
        <div class="col-lg-4">
            <div class="carousel_item">third post</div>
        </div>
    </div>

    <div class="carousel_actions">
        <button id="carousel_button--prev" aria-label="previous slide">
            <
        </button>
        <button id="carousel_button--next" aria-label="next slide">
            >
        </button>
    </div>
</div>
<script type="text/javascript" src="js/carousel.js"></script>""

JS code:

let slidePosition = 0;
const slides = document.getElementsByClassName('carousel_item');
const totalSlides = slides.length;

document.getElementById('carousel_button--next').addEventListener("click", function() {
    moveToNextSlide();
});

document.getElementById('carousel_button--prev').addEventListener("click", function() {
    moveToPrevSlide();
});

function moveToNextSlide() {
    console.log('next works');
}

function moveToPrevSlide() {
    console.log('prev works');
}

functions.php

function load_js(){

    wp_enqueue_script('jquery');
    wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', false, true);
    wp_enqueue_script('bootstrap');
    wp_register_script('carousel', get_template_directory_uri() . '/js/carousel.js');
    wp_enqueue_script('carousel');
}
add_action('wp_enqueue_scripts', 'load_js');

file structure

.
├── js
│   ├── bootstrap.min.js
│   └── carousel.js
├── index.php
├── front-page.php
└── functions.php

(there are other files there, only included the important ones for an easier overview)

I'm pretty sure I typed the correct path to the carousel.js file, can anyone enlighten me what's the problem here?

Solution

1- In your front-page.php file, remove the script tag. (i.e <script type="text/javascript" src="js/carousel.js"></script>). Your wp_enqueue_script function would take care of loading it onto the page!

2- You don't need those wp_register_script functions either! In your functions.php file remove them!

3- In the functions.php file replace the following snippet with your own:

add_action('wp_enqueue_scripts', 'load_js');

function load_js()
{
  wp_enqueue_script('jquery');
  wp_enqueue_script('bootstrap', get_theme_file_uri('/js/bootstrap.min.js'), 'jquery', 1.0, true);
  wp_enqueue_script('carousel', get_theme_file_uri('/js/carousel.js'), NULL, 1.0, true);
}

These should do the trick for you!

When you load the page, right-click on it and view the source. You should be able to find both bootstrap and carousel loaded onto the source!

Let me know if you could get it to work!

Answered By - Ruvee