Javascript not working?

by

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.

1 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

Leave a Comment