Uncaught TypeError: Cannot read properties of null (reading 'classList') at HTMLDivElement.<anonymous>
Question
I'm making a WordPress theme and wanted to make my header(navbar) dynamic. So while I was doing that I wanted to make my navbar mobile responsive so while I do that I was facing this error in the Javascript file given in title.
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php
wp_head();
?>
</head>
<body>
<!--NAVBAR Start-->
<nav class="fullnav">
<div class="container">
<div class="align-item-center">
<div class="main-nav">
<div class="main-nav-1">
<a href="index.html"></a>
<img src="wp-content/themes/blog/assets/img/logo.jpg" alt="">
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="main-nav-2">
<?php
wp_nav_menu(
array(
'manu' => 'primary-menu',
'container' => '',
'item_wrap' => '<ul class="nav-menu">%3$s</ul>'
)
);
?>
<!-- <ul class="nav-menu ">
<li class="nav-item"><a href='#' class="nav-link">Explore</a></li>
<li class="nav-item"><a href='#' class="nav-link">How it works</a></li>
<li class="nav-item"><a href='#' class="nav-link">Our Blog</a></li>
<li class="nav-item"><a href='#' class="nav-link"> FAQ & Support</a></li>
<li class="nav-item"><a href="#" class="nav-btn">Business <i class="fas fa-arrow-right"></i></a></li>
</ul> -->
</div>
</div>
</div>
</div>
</nav>
<!-- NAVBAR End -->
Footer.php
<!-- JavaScript Starts -->
<?php
wp_footer();
?>
<!-- JavaScript Ends -->
</body>
</html>
functions.php
// For JavaScript
function qclub_register_scripts(){
wp_enqueue_script('register-script', get_template_directory_uri() . "/assets/js/main.js", array(), '0.0.1', true);
}
add_action('wp_enqueue_scripts', 'qclub_register_scripts');
//For Menu
function register_menu(){
register_nav_menus(
array('primary-menu' => 'Header Menu')
);
}
add_action("init", "register_menu");
//For menu --style
function selected_class($classes, $item){
if(in_array('menu-item-25', $classes)){
$classes[] = 'fas fa-arrow-right';
$classes[] = 'nav-btn';
}
return $classes;
}
add_filter('nav_menu_css_class', 'selected_class', 10,2)
?>
Here is the Javascript file main.js
const hamburger = document.querySelector(".hamburger")
const navmenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navmenu.classList.toggle("active");
})
document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
hamburger.classList.remove("active");
navmenu.classList.remove("active");
}))
WordPress generated Code
<!--NAVBAR Start-->
<nav class="fullnav">
<div class="container">
<div class="align-item-center">
<div class="main-nav">
<div class="main-nav-1">
<a href="index.html"></a>
<img src="wp-content/themes/blog/assets/img/logo.jpg" alt="">
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="main-nav-2">
<ul id="menu-header-menu" class="menu"><li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://localhost/wordpress/index.php/explore/">Explore</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/wordpress/index.php/how-it-works/">How it works</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost/wordpress/index.php/our-blog/">Our Blog</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/wordpress/index.php/faq-support/">FAQ & Support</a></li>
<li id="menu-item-25" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-25 fas fa-arrow-right nav-btn"><a href="http://localhost/wordpress/index.php/qclub-for-business/">Business</a></li>
</ul> <!-- <ul class="nav-menu ">
<li class="nav-item"><a href='#' class="nav-link">Explore</a></li>
<li class="nav-item"><a href='#' class="nav-link">How it works</a></li>
<li class="nav-item"><a href='#' class="nav-link">Our Blog</a></li>
<li class="nav-item"><a href='#' class="nav-link"> FAQ & Support</a></li>
<li class="nav-item"><a href="#" class="nav-btn">QClub for Business <i class="fas fa-arrow-right"></i></a></li>
</ul> -->
</div>
</div>
</div>
</div>
</nav>
<!-- NAVBAR End -->
I have given all the detail here thank you for helping.
1 answers
solution1
0 2021-10-22 11:13:24
I have solved this question Answers is below: if you wanted to get a user-defined menu-list in hamburger(navbar) you have to make a class for ul like
header.php
<?PHP
wp_nav_menu(
array(
manu' => 'primary-menu',
menu_class' => 'nav-menu', // class to call in js
container' => '',
item_wrap' => '<ul class="nav-menu">%3$s</ul>
)
);
?>
main.js
const hamburger = document.querySelector(".hamburger")
const navmenu = document.querySelector(".nav-menu"); // use that class here.
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navmenu.classList.toggle("active");
})
document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
hamburger.classList.remove("active");
navmenu.classList.remove("active");
}))
I will keep this question and answer here so that others can take help from it Thank you:)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.<anonymous>
Stuck at this error: Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.<anonymous>
Uncaught TypeError: Cannot read properties of undefined (reading 'className') at HTMLDivElement.<anonymous>
category.js:9 Uncaught TypeError: Cannot read properties of null (reading 'classList') at HTMLAnchorElement.<anonymous> (category.js:9)
TypeError: Cannot read properties of null (reading 'classList')
Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
Why does classList return an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?
Uncaught TypeError cannot read property 'classlist' of null
uncaught TypeError: Cannot read property 'classList' of null
Uncaught TypeError: Cannot read property 'classList' of null
Related Tags