Mudar class de uma div usando javascript

Front-end
,
#1

Saudações, eu me inscrevi recentemente no site por ver a oportunidade de tirar minhas duvidas, e a duvida que eu tenho agora é: como eu posso mudar a class de uma div no meu html usando uma function pelo javascript?

Vou deixar a baixo o fragmento do meu html e javascript:

HTML:
<div class="botao"><button>clique aqui</button> </div>
<div class="menu">lorem...</div>

JavaScript:
var botao = document.getElementsByClassName('botao')
var menu = document.getElementsByClassName('menu')

for (var element of botao) {
element.addEventListener('click', function () {
menu.classList.toggle('show')
})
}

Esse script seria para abrir e fechar o menu, porem quando eu clico no botão o seguinte erro aparece “TypeError: menu.classList is undefined”

Se puderem me ajudar, serei eternamente grato!!

#2

Veja na documentação que getElementsByClassName retorna uma lista de elementos (não é à toa que está no plural: “Elements”).

Sendo assim, você tem que pegar o primeiro elemento desta lista:

var menu = document.getElementsByClassName('menu')[0];

Ou então percorra o resultado com um for, igual você fez com o botao.

Mas nesse caso, se só tem um elemento, não tem porque retornar uma lista. Então uma alternativa é usar querySelector, que retorna o primeiro elemento que for encontrado:

var menu = document.querySelector('div.menu');
1 curtida
#4

Agora está retornando que botao is null

var botao = document.querySelector('div .botao');
var menu = document.querySelector('div .menu');

for (var element of botao){
element.addEventListener('click', function () {
menu.classList.toggle('show')
})}
#5

Não pode ter espaço.

div .botao (com espaço) quer dizer "elemento que tem a classe botao e está dentro de um div".

div.botao (sem espaço) quer dizer "div que tem a classe botao".

No seu caso, você quer o segundo…

Mas aí ele só retorna um elemento e não precisa mais do for, então seria apenas:

document.querySelector('div.botao').addEventListener(etc...)
1 curtida