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>