/    Sign up×
Community /Pin to ProfileBookmark

Javascript in child theme will not work.

Hi, I am trying to put a counter on my page with javascript, but the counter will not work.
I have put the javascript in a file called custom-sripts.js which is in my child theme, twentythirteen-child.
I have put the code to enqueue it in functions php. And have put the html on a wordpress page.
Where am I going wrong, and is this code correct.
If anyone can help me please.
Here is the javascript code in custom-scripts.js:

<script>

let counterDisplayElem = document.querySelector(‘.counter-display’);
let counterMinusElem = document.querySelector(‘.counter-minus’);
let counterPlusElem = document.querySelector(‘.counter-plus’);

let count = 0;

updateDisplay();

counterPlusElem.addEventListener(“click”,()=>{
count++;
updateDisplay();
}) ;

counterMinusElem.addEventListener(“click”,()=>{
count–;
updateDisplay();
});

function updateDisplay(){
counterDisplayElem.innerHTML = count;
};
here is the code in functions.php:
<?php
function childtheme_parent_styles() {
wp_enqueue_style( ‘parent’, get_template_directory_uri().’/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘childtheme_parent_styles’);

function mytheme_files() {
wp_enqueue_style(‘mytheme_main_style’, get_stylesheet_uri());

}

add_action( ‘wp_enqueue_scripts’, ‘mytheme_files’);

add_action( ‘wp_enqueue_scripts’, ‘my_custom_script_load’ );
function my_custom_script_load(){
wp_enqueue_script( ‘my-custom-script’, get_stylesheet_directory_uri() . ‘/custom-scripts’, array( ‘jquery’ ) );
}

?>

and here is the html in my wordpress page:

<h1 class=”counter-display”>(..)</h1>
<button class=”counter-minus”>-</button>
<button class=”counter-plus”>+</button>

to post a comment

5 Comments(s)

Copy linkTweet thisAlerts:
@ZorgJun 18.2021 — Shouldn't '/custom-scripts' be '/custom-scripts.js' in:

wp_enqueue_script( 'my-custom-script', get_stylesheet_directory_uri() . '/custom-scripts', array( 'jquery' ) );

Also, check where the file is located, get_stylesheet_directory_uri() is the CSS directory not the js directory

See:

[https://developer.wordpress.org/themes/basics/including-css-javascript/#scripts](https://developer.wordpress.org/themes/basics/including-css-javascript/#scripts)
Copy linkTweet thisAlerts:
@iamkajalJun 18.2021 — I face the same problem that you are facing, then I try this code. It works for me.

function my_scripts_method() {<br/>
wp_enqueue_script(<br/>
'custom-script',<br/>
get_stylesheet_directory_uri() . '/js/custom_script.js',<br/>
array( 'jquery' )<br/>
);<br/>
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Copy linkTweet thisAlerts:
@wildguy2authorJun 20.2021 — Thanks, will try that
Copy linkTweet thisAlerts:
@wildguy2authorJun 20.2021 — No, it still not working. I have also tried moving the code around in functions.php.

Which way would you say is correct here, like this:

<?php

function childtheme_parent_styles() {

wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );

}

add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

function mytheme_files() {

wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());

}

add_action( 'wp_enqueue_scripts', 'mytheme_files');

function my_scripts_method() {<br/>
wp_enqueue_script(<br/>
'custom-script',<br/>
get_template_directory_uri() . '/js/custom_script.js',<br/>
array( 'jquery' )<br/>
);<br/>
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );



?>

or this way:

<?php

function childtheme_parent_styles() {

wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );

wp_enqueue_style('mytheme_main_style', get_stylesheet_uri());

wp_enqueue_script(

'custom-script',

get_template_directory_uri() . '/js/custom_script.js',

array( 'jquery' );

}

}

add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

add_action( 'wp_enqueue_scripts', 'mytheme_files');

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>


Copy linkTweet thisAlerts:
@ZorgJun 22.2021 — Your first example looks like it should work, except you have a typo.

**Remove the ticks around this function:**
<i>
</i><span><code>function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );</code></span>
×

Success!

Help @wildguy2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.30,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...