admin管理员组

文章数量:1435082

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!

  • javascript
Share Improve this question asked Mar 28, 2019 at 15:23 JakePowellJakePowell 431 silver badge10 bronze badges 4
  • 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

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

本文标签： Don39t understand how to link Javascript files in Wordpress

版权声明：本文标题：Don&#39;t understand how to link Javascript files in Wordpress 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745647196a2668206.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。