Don't understand how to link Javascript files in Wordpress|Programmer puzzle solving

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', ':300');
    wp_enqueue_style('font_awesome', '.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!

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/css?family=Roboto:300');
    wp_enqueue_style('font_awesome', 'https://stackpath.bootstrapcdn/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!

Share Improve this question asked Mar 28, 2019 at 15:23 JakePowell 431 silver badge10 bronze badges

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 Commented Mar 28, 2019 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 Commented Mar 28, 2019 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 Commented Mar 28, 2019 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 Commented Mar 28, 2019 at 16:01

Add a comment |

2 Answers 2

Sorted by: Reset to default 2

Please read this documentation https://developer.wordpress/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()

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!");
    });
});

Programmer puzzle solving

Don't understand how to link Javascript files in Wordpress

2 Answers 2

Articles related to this article

comment list (0)