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 JakePowellJakePowell 431 silver badge10 bronze badges 4 |2 Answers
Reset to default 2Please 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!");
});
});
tyc_scripts.jsfile 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<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 aswindow.onloador a listener onDOMContentLoaded. – WebElaine Commented Mar 28, 2019 at 16:01