Making a dropdown menu for mobile

Question

I'm trying to use media queries and javascript to make a dropdown menu for my page. I have the content i want to be in the menu in a <div> marked with a class, in this case. class="other-pages". My media query has 2 classes in it: .other-pages.closed and .other-pages.open. My goal is to use javascript to change the class once the media query is active to the closed class. Then make a button i have, change the class to the open version.

So here's what I have so far.

let menuContentBase = document.getElementsByClassName('.other-pages');

let mediaQueryMax = window.matchMedia('(max-width: 1080px)');

if (mediaQueryMax.matches) {
    menuContentBase.classlist.remove('.other-pages');
    menuContentBase.classlist.add('other-pages.closed');
}

When I load this into my browser and look in the debugger however it says menuContentBase.classlist is undefined.

Not entirely sure what to do from here.

Thank you for any advice/recommendations you may have.

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Robin Zigmond, May 12 '22 at 20:37

score 0 · Answer 1 · answered May 12 '22 at 20:47

Its a simple toggle

let element = document.querySelector(".mq-value")
element.addEventListener('click', (e)=>{
  e.target.classList.contains('open') ? 
e.target.classList.remove('open') : 
e.target.classList.add('open')
})

.open{
  color:red
}

  <div class="mq-value open"> toggle </div>

Tharusha Induwara · Accepted Answer · 2022-05-12T21:02:59.290

-1

I think the issue is in the class name. When it comes to document.getElementsByClassName, you don't need to put . before the class name. Replae this

let menuContentBase = document.getElementsByClassName('.other-pages');

with this

let menuContentBase = document.getElementsByClassName('other-pages');

If you want further information about this, you can refer https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Also, same for classList not classlist and the L must be uppercase.

if (mediaQueryMax.matches) {
    menuContentBase.classList.remove('other-pages');
    menuContentBase.classList.add('other-pages.closed');
}

Try this one and let me know if it's works or not. Thank you!

edited May 12 '22 at 21:02

answered May 12 '22 at 20:44

Tharusha Induwara

74
1
2
9

Hello! this worked in that it got rid of the undefined problem. The problem i'm having now is that It won't actually apply this to the HTML. But that's some research I can do on my own. Thanks! – arrogate May 12 '22 at 21:10
while this answer is correct that the classname should not include the "." (which I'd missed), it misses the main point, that `menuContentBase` as defined here has no `classList` properties (hence calling `remove` or `add` on it will throw an error), because it's referring to a collection of HTML elements rather than an individual one. See the question I flagged this as a duplicate of (in the comments). – Robin Zigmond May 12 '22 at 21:50
You're correct @RobinZigmond. I just answered only for undefined issue. It's better to refer that question. – Tharusha Induwara May 13 '22 at 05:20

Making a dropdown menu for mobile

2 Answers2