-1

I'm trying to run some simple javascript on a button click but I can't seem to find clear instructions on how to set up Javascript to run in wordpress.

The steps I've taken so far are to enqueue the script:

function tyc_load_styles() {
    wp_enqueue_style('main_font', 'https://fonts.googleapis.com/css?family=Roboto:300');
    wp_enqueue_style('font_awesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    wp_enqueue_style('main_styles', get_stylesheet_uri());
    wp_enqueue_script( 'tyc_scripts', get_theme_file_uri('/js/tyc_scripts.js'));
};

add_action('wp_enqueue_scripts', 'tyc_load_styles');

Then in my js file:

document.getElementById("navButton").addEventListener("click", function(){
 document.getElementById("mobile-menu").style.display = "block";
});

finally in header.php

<button id="navButton" class="button icon">
  <i class="fa fa-3x fa-bars mobile-nav"></i>
</button>

I'm getting an uncaught type error: Cannot read property 'addEventListener' of null

Thanks in advance!

  • It looks like you're enqueueing properly. Did you check to verify that your tyc_scripts.js file is loaded in the page source? If it's being loaded, most likely you need to wrap everything in a document ready call. WP loads jQuery by default - themes and plugins can unhook it, but you can see that in the page source as well to verify it's there, and then list jquery as a dependency when you enqueue your script. – WebElaine Mar 28 at 15:40
  • <script type='text/javascript' src='http://youth-cafe.local/wp-content/themes/youthcafe/js/tyc_scripts.js?ver=5.1.1'></script> – JakePowell Mar 28 at 15:44
  • This appears in the <head> section in page source. Do I need to reference the script like this <script>myFunction()</script> or do I have to use jQuery? – JakePowell Mar 28 at 15:51
  • No, like any other JS, you would not include <script></script> tags inside the js file. And no, you don't have to use jQuery, but you need a way to ensure your JS is executing after the document is fully loaded, such as window.onload or a listener on DOMContentLoaded. – WebElaine Mar 28 at 16:01
2

Please read this documentation https://developer.wordpress.org/reference/functions/wp_enqueue_script/ You need to set 5th parameter to true so the javascript is loaded in the footer.

wp_enqueue_script( 'tyc_scripts', get_theme_file_uri('/js/tyc_scripts.js'), array(), false, true );

if the issue still persists please add your js code inside jquery document.ready()

1

Thanks to WebElaine, you got it.

I think that the type error was because the script loaded before the DOM and so there was no navButton to get, wrapping the function in a DOMcontentloaded listener did the trick.

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("navButton").addEventListener('click', function() {
        alert("This works!");
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.