Wordpress theme development: Javascript code not executing when clicking button

Question

I have been learning how to design a custom Wordpress theme using php, html, css and javascript. I am using the Wordpress development tool Local to view my website when I make a change. I am a beginner to all of these languages and I am having an issue with executing my javascript function when a button is clicked in the navigation. The button is supposed to display a slideout menu after it is clicked. I am not sure if this is an issue with my html and javascript syntax or if I am linking them incorrectly(either in the html file or the functions.php file). Anyways, this is what I have so far that may be causing the issue.

header.php

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <?php wp_head(); ?>
    <script src="js/main.js"></script>
</head> 
<body>
    <div id ="slideout-menu">
        <ul>
            <li> 
              list items
            </li>
        </ul>
    </div>
<nav>
    <ul>
        <li><a href ="#">Home</a></li>
        <li><a href ="#">About</a></li>
        <li><button onclick="showSlideOutMenu();">Projects</button></li>
    </ul>
</nav>

main.js

const slideoutMenu = document.getElementById("slideout-menu");

function showSlideOutMenu(){
    if(slideoutMenu.style.opacity == "1"){
        slideoutMenu.style.opacity = '0';
        slideoutMenu.style.pointerEvents = 'none';
    }
    else{
        slideoutMenu.style.opacity = '1';
        slideoutMenu.style.pointerEvents = 'auto';
    }
}

functions.php

<?php

function js_css_setup(){
    wp_enqueue_style('style', get_stylesheet_uri(), '/css/style.css');
    wp_enqueue_script("main", get_theme_file_uri() .'/js/main.js', NULL,microtime(),false);

}

add_action('wp_enqueue_scripts','js_css_setup');
?>

The style.css is functional and displays the menu when the opacity is set to 1 so I ruled that out. My webpage can also display an alert message if added to the main.js. Does anything else that may be causing the issue stick out?

Parsa · Accepted Answer · 2020-03-20 21:46:37Z

First, you should set the in_footer parameter to true in wp_enqueue_script function

Your JS code run before page complete loaded and made it error in the browser console

for load main style you can use get_stylesheet_uri() function in wp_enqueue_style

<?php
function js_css_setup() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_script( "main-js", get_theme_file_uri() . '/js/main.js', null, microtime(), true );
}

add_action( 'wp_enqueue_scripts', 'js_css_setup' );

const or let in ES6 and you can't use directly in the browser, you should use var.

https://tylermcginnis.com/var-let-const/

https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75

var slideoutMenu = document.getElementById("slideout-menu");

function showSlideOutMenu() {
    console.log(slideoutMenu.style.opacity);

    if (slideoutMenu.style.opacity === "1") {
        slideoutMenu.style.opacity = '0';
        slideoutMenu.style.pointerEvents = 'none';
    } else {
        slideoutMenu.style.opacity = '1';
        slideoutMenu.style.pointerEvents = 'auto';
    }
}

index.php

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <?php wp_head(); ?>
</head>
<body>
<?php wp_body_open(); ?>
<div id="slideout-menu">
    <ul>
        <li>
            list items
        </li>
    </ul>
</div>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <button onclick="showSlideOutMenu();">Projects</button>
        </li>
    </ul>
</nav>
<?php wp_footer(); ?>
</body>
</html>

I recommended first learn HTML and CSS, Then learn JS (ES5/ES6)

Farhan Ali · Accepted Answer · 2020-03-20 23:13:15Z

0

Change your script enqueue to this

 wp_enqueue_script("main", get_template_directory_uri().'/js/main.js', NULL,microtime(),false);

answered Mar 20, 2020 at 23:13

Farhan Ali

16712 bronze badges

Collectives™ on Stack Overflow

Wordpress theme development: Javascript code not executing when clicking button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related