Javascript not working?

Question

2 days ago my javascript was located in my footer folder running correctly, until suddenly it stopped working. I was lazy to do the proper way of enqueueing, so I officially did that to see if it would resolve the problem, it did not. When I inspect the html, the javascript is loaded within, but does not play. So then I thought it was the script, and then test ran a script I know is working fine from tuts plus, again, nothing.

Here's their script, which of course I rearranged to match my folder layout.

<?php 

function twentyfifteen_child_scripts() {
    wp_enqueue_script( 'transition js', get_stylesheet_directory_uri() . '/js/transition.js' );
}
add_action('wp_enqueue_scripts','twentyfifteen_child_scripts');

And within my transition.js folder there is...

alert("yo");

---

Checking the console on chrome two errors pop up:

(1) Failed to load resource: the server responded with a status of 404 (Not Found)

(2) Uncaught TypeError: $ is not a function

Which is referring to this script.

 <script type="text/javascript">
        $(".menu-button").click(function () {
    $(this).parents(".wrapper").toggleClass("show-menu");
});
    </script>

This script works fine on HTML testbeds.

---

I'm assuming the problem has nothing to do with this code, but I'd thought it would help. Please, if anyone is fammiliar or has heard of a situation similar to do this happening, offer some advice on it, feel like I'm in a dead end right now. Thanks.

Answer 1

The "Failed to load resource" is probably a red herring and isn't related to your issue. The fact that it is throwing an error about the $ shortcut means your js file is being loaded correctly.

The likely issue is that jQuery in WordPress loads in "noConflict" mode. As such the $ shortcut will not work by default. Try replacing your script with this:

<script type="text/javascript">
    jQuery(".menu-button").click(function () {
        jQuery(this).parents(".wrapper").toggleClass("show-menu");
    });
</script>

Or, alternatively if you really like the $ shortcut:

<script type="text/javascript">
    (function($) {
        $(".menu-button").click(function () {
            $(this).parents(".wrapper").toggleClass("show-menu");
        });
    })(jQuery);
</script>

There is also an issue with the logic in your javascript. The line

$(this).parents(".wrapper").toggleClass("show-menu");

Will not work as expected. jQuery.parents() returns a set of results while jQuery.toggleClass() expects a single element. If you know that the element directly above show-menu will always be wrapper and that is the only element you wish to effect, then you can simply swap that line out for this

$(this).parent(".wrapper").toggleClass("show-menu");

Alternatively, if wrapper can be an arbitrary height above show-menu, you will need something like this

<script type="text/javascript">
    jQuery(".menu-button").click(function () {
        jQuery(this).parents(".wrapper").each(function(){
            jQuery(this).toggleClass("show-menu");
        });
    });
</script>

Incidentally, the reason you are getting that "Not Found" error is because transitions.js does not exist at this url: https://generation-co.co/wp-content/themes/twentyfifteenG-CHILD/js/transition.js