How do I fix my dropdown menu in Javascript?How to validate an email address in JavaScript?How do JavaScript closures work?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?Which equals operator (== vs ===) should be used in JavaScript comparisons?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?
What's the difference between "ricochet" and "bounce"?
Should one save up to purchase a house/condo or maximize their 401(k) first?
How is it believable that Euron could so easily pull off this ambush?
What's an appropriate age to involve kids in life changing decisions?
Why is it wrong to *implement* myself a known, published, widely believed to be secure crypto algorithm?
What are my options legally if NYC company is not paying salary?
How to explain intravenous drug abuse to a 6-year-old?
Two (probably) equal real numbers which are not proved to be equal?
My perfect evil overlord plan... or is it?
I want to write a blog post building upon someone else's paper, how can I properly cite/credit them?
What is the oldest instrument ever?
What happens when the drag force exceeds the weight of an object falling into earth?
Using mean length and mean weight to calculate mean BMI?
Employee is self-centered and affects the team negatively
Why doesn't a particle exert force on itself?
How could a civilization detect tachyons?
How to start your Starctaft II games vs AI immediatly?
Would the rotation of the starfield from a ring station be too disorienting?
While drilling into kitchen wall, hit a wire - any advice?
why it is 2>&1 and not 2>>&1 to append to a log file
Opposite party turned away from voting when ballot is all opposing party
As a small race with a heavy weapon, does enlage remove the disadvantage?
Is your maximum jump distance halved by grappling?
How can it be that ssh somename works, while nslookup somename does not?
How do I fix my dropdown menu in Javascript?
How to validate an email address in JavaScript?How do JavaScript closures work?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?Which equals operator (== vs ===) should be used in JavaScript comparisons?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am making a navbar for my project which has several dropdown menus, here is my navbar code:
<nav>
<a class="logo" href="% url 'home' %">LOGO</a>
<div class="navbar">
<div class="dropdown">
<a href="#" class="dropdown-btn" id="dropdown-btn">Teacher <i class="fa fa-caret-down"></i> </a>
<div class="dropdown-content">
<a href="% url 'teacher:add-teacher' %">Add Teacher</a>
<a href="% url 'teacher:list-teacher' %">List Teacher</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-btn" id="dropdown-btn">Blog <i class="fa fa-caret-down"></i> </a>
<div class="dropdown-content">
<a href="% url 'blog:blog-form' %">Add Blog</a>
<a href="#">Blog List</a>
</div>
</div>
</div>
</nav>
I want that onclick of dropdown-btn, it shows dropdown-content. I tried below code, but it gives the following error in console.
Uncaught TypeError: Cannot read property 'classList' of undefined
and this is my javascript Code. .dropdown-content has a display of none and active-dropdown has display:block in it
let i, dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', () =>
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
Thank you in advance!
javascript
asked Mar 23 at 7:32
NoorNoor
968
add a comment |
I am making a navbar for my project which has several dropdown menus, here is my navbar code:
<nav>
<a class="logo" href="% url 'home' %">LOGO</a>
<div class="navbar">
<div class="dropdown">
<a href="#" class="dropdown-btn" id="dropdown-btn">Teacher <i class="fa fa-caret-down"></i> </a>
<div class="dropdown-content">
<a href="% url 'teacher:add-teacher' %">Add Teacher</a>
<a href="% url 'teacher:list-teacher' %">List Teacher</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-btn" id="dropdown-btn">Blog <i class="fa fa-caret-down"></i> </a>
<div class="dropdown-content">
<a href="% url 'blog:blog-form' %">Add Blog</a>
<a href="#">Blog List</a>
</div>
</div>
</div>
</nav>
I want that onclick of dropdown-btn, it shows dropdown-content. I tried below code, but it gives the following error in console.
Uncaught TypeError: Cannot read property 'classList' of undefined
and this is my javascript Code. .dropdown-content has a display of none and active-dropdown has display:block in it
let i, dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', () =>
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
Thank you in advance!
javascript
asked Mar 23 at 7:32
NoorNoor
968
add a comment |
I am making a navbar for my project which has several dropdown menus, here is my navbar code:
<nav>
<a class="logo" href="% url 'home' %">LOGO</a>
<div class="navbar">
<div class="dropdown">
<a href="#" class="dropdown-btn" id="dropdown-btn">Teacher <i class="fa fa-caret-down"></i> </a>
<div class="dropdown-content">
<a href="% url 'teacher:add-teacher' %">Add Teacher</a>
<a href="% url 'teacher:list-teacher' %">List Teacher</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-btn" id="dropdown-btn">Blog <i class="fa fa-caret-down"></i> </a>
<div class="dropdown-content">
<a href="% url 'blog:blog-form' %">Add Blog</a>
<a href="#">Blog List</a>
</div>
</div>
</div>
</nav>
I want that onclick of dropdown-btn, it shows dropdown-content. I tried below code, but it gives the following error in console.
Uncaught TypeError: Cannot read property 'classList' of undefined
and this is my javascript Code. .dropdown-content has a display of none and active-dropdown has display:block in it
let i, dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', () =>
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
Thank you in advance!
javascript
asked Mar 23 at 7:32
NoorNoor
968
I am making a navbar for my project which has several dropdown menus, here is my navbar code:
<nav>
<a class="logo" href="% url 'home' %">LOGO</a>
<div class="navbar">
<div class="dropdown">
<a href="#" class="dropdown-btn" id="dropdown-btn">Teacher <i class="fa fa-caret-down"></i> </a>
<div class="dropdown-content">
<a href="% url 'teacher:add-teacher' %">Add Teacher</a>
<a href="% url 'teacher:list-teacher' %">List Teacher</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-btn" id="dropdown-btn">Blog <i class="fa fa-caret-down"></i> </a>
<div class="dropdown-content">
<a href="% url 'blog:blog-form' %">Add Blog</a>
<a href="#">Blog List</a>
</div>
</div>
</div>
</nav>
I want that onclick of dropdown-btn, it shows dropdown-content. I tried below code, but it gives the following error in console.
Uncaught TypeError: Cannot read property 'classList' of undefined
and this is my javascript Code. .dropdown-content has a display of none and active-dropdown has display:block in it
let i, dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', () =>
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
Thank you in advance!
javascript
javascript
asked Mar 23 at 7:32
NoorNoor
968
asked Mar 23 at 7:32
NoorNoor
968
asked Mar 23 at 7:32
NoorNoor
968
asked Mar 23 at 7:32
NoorNoor
968
asked Mar 23 at 7:32
NoorNoor
968
968
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Two issues:
1) Your loop was using an i that was outside of its scope
2) You were using the new () => fat arrow function syntax which doesn't bind this to the function - so you were referring to the window when you wrote this.nextElementSibling.
Try this:
var dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (var i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', function ()
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
answered Mar 23 at 7:41
HybridHybrid
3,92421032
add a comment |
Your issue is that your arrow function was using a different this - also, look at your scoping for i:
var dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (let i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', function()
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
answered Mar 23 at 7:42
Jack BashfordJack Bashford
20.3k52050
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55311634%2fhow-do-i-fix-my-dropdown-menu-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Two issues:
1) Your loop was using an i that was outside of its scope
2) You were using the new () => fat arrow function syntax which doesn't bind this to the function - so you were referring to the window when you wrote this.nextElementSibling.
Try this:
var dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (var i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', function ()
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
answered Mar 23 at 7:41
HybridHybrid
3,92421032
add a comment |
Two issues:
1) Your loop was using an i that was outside of its scope
2) You were using the new () => fat arrow function syntax which doesn't bind this to the function - so you were referring to the window when you wrote this.nextElementSibling.
Try this:
var dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (var i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', function ()
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
answered Mar 23 at 7:41
HybridHybrid
3,92421032
add a comment |
Two issues:
1) Your loop was using an i that was outside of its scope
2) You were using the new () => fat arrow function syntax which doesn't bind this to the function - so you were referring to the window when you wrote this.nextElementSibling.
Try this:
var dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (var i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', function ()
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
answered Mar 23 at 7:41
HybridHybrid
3,92421032
Two issues:
1) Your loop was using an i that was outside of its scope
2) You were using the new () => fat arrow function syntax which doesn't bind this to the function - so you were referring to the window when you wrote this.nextElementSibling.
Try this:
var dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (var i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', function ()
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
answered Mar 23 at 7:41
HybridHybrid
3,92421032
answered Mar 23 at 7:41
HybridHybrid
3,92421032
answered Mar 23 at 7:41
HybridHybrid
3,92421032
answered Mar 23 at 7:41
HybridHybrid
3,92421032
3,92421032
add a comment |
add a comment |
Your issue is that your arrow function was using a different this - also, look at your scoping for i:
var dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (let i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', function()
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
answered Mar 23 at 7:42
Jack BashfordJack Bashford
20.3k52050
add a comment |
Your issue is that your arrow function was using a different this - also, look at your scoping for i:
var dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (let i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', function()
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
answered Mar 23 at 7:42
Jack BashfordJack Bashford
20.3k52050
add a comment |
Your issue is that your arrow function was using a different this - also, look at your scoping for i:
var dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (let i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', function()
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
answered Mar 23 at 7:42
Jack BashfordJack Bashford
20.3k52050
Your issue is that your arrow function was using a different this - also, look at your scoping for i:
var dropdownBtns = document.getElementsByClassName("dropdown-btn");
for (let i = 0; i < dropdownBtns.length; i++)
dropdownBtns[i].addEventListener('click', function()
let panel = this.nextElementSibling;
panel.classList.toggle('active-dropdown');
);
answered Mar 23 at 7:42
Jack BashfordJack Bashford
20.3k52050
answered Mar 23 at 7:42
Jack BashfordJack Bashford
20.3k52050
answered Mar 23 at 7:42
Jack BashfordJack Bashford
20.3k52050
answered Mar 23 at 7:42
Jack BashfordJack Bashford
20.3k52050
20.3k52050
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55311634%2fhow-do-i-fix-my-dropdown-menu-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
