JavaScript in Wordpress - Functions cannot be called

Question

I've searched StackOverflow for the past 2 days and haven't found a solution to this. I'm trying to do something extremely basic but WordPress has me pulling my hair out.

I have a JavaScript file called 'test.js' which in in a folder called scripts inside my Child Theme folder. This file has the following code:

function myFunc() {
 alert('hi');
}

I have followed the best practice for loading JavaScripts in Wordpress and I've included the following function in my functions.php file in my Child Theme folder.

function add_my_script() {
wp_enqueue_script('my-script', get_stylesheet_directory_uri().'/scripts/test.js', array('jquery'), '1.0', true);                    }
add_action('init', 'add_my_script');

Note: get_stylesheet is used to get the Child Theme directory as that's where my style.css is which override the style.css in my Parent Theme as per Wordpress's child theme rules.

Now after doing this I expect to have access to the function myFunc() in my test.js file. So in my function.php file I have a function TestmyFunc() which does the following:

function TestmyFunc()
{
echo 'Click the button below';
echo '<button onclick="myFunc()">Click Me</button>';
}

The function TestmyFunc() is called in Wordpress when a certain page loads. The page loads perfectly with the output 'Click the button below' printed and the button saying 'Click Me' is also there. Now here's the frustrating part, no matter what I do the button fails to respond when clicked. Absolutely nothing.

My first thought was that the JavaScript isn't loading and there is a problem with my wp_enqueue_script code. However this isn't the problem.

I tried the following changes. First I modified my test.js file to just this one line:

alert('hi');

Then I simply wrote the following function in my functions.php file:

    function run_my_script() {
    wp_enqueue_script('my-script', get_stylesheet_directory_uri().'/scripts/test.js', array('jquery'), '1.0', true);                    
        }
add_action('init', 'add_my_script');

run_my_script is then set to load in my page the same way TestmyFunc() loaded. This seems to work fine and when my page in WordPress loads the run_my_script() function works and I get an alert box saying 'hi' as soon as the page loads. Obviously this is not what I want as I want it to be displayed only when a button is clicked which requires a function called from the test.js file and not just running the test.js script.

So it seems there might be a problem with the way I'm calling the JavaScript function? If anyone can help in absolutely any way that will be great.

I simply cannot get a called JavaSript function to work using wp_enqueue_script, the only time it worked was when I loaded my script the old-fashioned/non-WordPress recommended way following this tutorial http://lorelle.wordpress.com/2005/09/16/using-javascript-in-wordpress/

This involved including this in header.php:

<script src="<?php echo get_stylesheet_directory_uri(); ?>/scripts/test.js" type="text/javascript"></script>

And then calling the function in functions.php

echo'
   <script type="text/javascript">
   <!--
   myFunc();
   //--></script>';

This worked and myFunc() runs as called. However, I don't want to edit my header.php file and prefer to use the best practice wp_enqueue_script method.

I really hope someone can help as I've barely slept in the past 48 hours trying everything possible and ending up utterly frustrated.

Answer 1

Simple checklist:

• Check your sourcecode. Be sure that the script is outputted in your browser. Make sure the URL is correct.

• wp_enqueue_scripts Your action to init is wrong, change it to: wp_enqueue_scripts instead. Though your code might work, its considered best practice to use wp_enqueue_scripts.

It should be:

add_action('wp_enqueue_scripts', 'run_my_script');

• wp_head(); and wp_footer(); Make sure your child theme / parent theme has the following tags: wp_head(); and wp_footer();

• $in_footer You might have to change your $in_footer parameter to false. To make the script output in your header. In other words, make sure your function is initiated before your markup is called.

Hope it helps!