Разница .getElementsByClassName и .getElementByID?

Question

[usedtoknow]

Всем привет! Прошу помочь. Я обычно присваиваю классы всем блокам, но почему-то, когда я присваиваю класс менюшке, скрипт открытия меню по клику не работает:
https://www.w3schools.com/code/tryit.asp?filename=...

Но, как только я меню все на ID, то все работает замечательно:

https://www.w3schools.com/code/tryit.asp?filename=...

В чем может быть проблема? Всю голову сломал

Answer 1

[alex]

Потому что .getElementsByClassName() возвращает коллекцию, а getElementByID непосредственно сам элемент.

Работать будет вот так:

document.getElementsByClassName("menu_1")[0].addEventListener("click", openMenu);

Comments

[usedtoknow]

Привет! к сожалению, тоже не работает: https://www.w3schools.com/code/tryit.asp?filename=...

[alex]

usedtoknow,

function openMenu() {
	document.getElementsByClassName("dropdown")[0].classList.toggle("active");
    
}

[Михаил]

usedtoknow, https://www.w3schools.com/code/tryit.asp?filename=...

[usedtoknow]

Михаил, спасибо! теперь работает)

document.getElementsByClassName("menu_1")[0].addEventListener("click", openMenu);

function openMenu() {
document.getElementsByClassName("dropdown")[0].classList.toggle("active");

}

а еще такая функция тоже сработала.

Не подскажешь, что значит "[0]" в твоей функции?

[Никита Егоров]

usedtoknow, выбор первого элемента из массива

[alex]

usedtoknow, означает, что берем первый элемент из коллекции

[usedtoknow]

Alex, спасибо! а можно еще спросить вопрос:

https://www.w3schools.com/code/tryit.asp?filename=...

как сделать так, чтобы подчеркивание было только по ссылке? вроде бы поставил, чтоб подчеркиваните шло на нее, но как то он все равно на весь блок тянет

[alex]

usedtoknow,

.sidebar_menu > li a {
	display: inline-block;
}

[alex]

usedtoknow, есть два способа объявления функции:

первый

function func(){
  ...
}

второй

var func = function(){
  ...
}

При первом способе объявления, функция будет доступна к выполнению уже на первой строчке скрипта, независимо от того где она была определена в скрипте, хоть на последней строчке. в вашем примере функция openMenu определена два раза, соответсвтенно второй вариант перезапишет первый и будет использоваться во всем скрипте, соответсвенно первая и вторая ссылка открывают второе подменю. можно исправить вот так: https://www.w3schools.com/code/tryit.asp?filename=...

Но на самом деле это костыль и так делать очень плохо, представьте что у вас таких менюшек на странице не 2, а 10, 50, 100... вам придется писать для каждой меню свой код.

[usedtoknow]

Alex, Alex, спасибо! то есть лучше сделать через function func()? других способов нет, чтобы не костыль! Спасибо, что помогаешь)) а то я весь интернет облазил, насчет таких менюшек видео практически нет - как будто прошлый век))

[alex]

usedtoknow, можно и через var подробнее, костыль не из-за этого, а из-за незнания работы javascript.

вот один из вариантов как можно решить вашу задачу

[usedtoknow]

Alex, большое спасибо) буду учиться

[usedtoknow]

Alex, Алекс, а можешь вкратце объяснить, что ты именно сделал в первой половине:

function openMenu(menu) {
var submenu = menu.children[1];

menu.addEventListener('click', function(){
submenu.classList.toggle('active');
});
}

в частности, вот это

function openMenu(menu) {
var submenu = menu.children[1];

[alex]

usedtoknow, взял элемент .submenu который является ребенком .menu. потом повесил на .menu обработчик который при клике на .menu переключает вложенный в него .submenu

[usedtoknow]

Alex, Привет!
у меня еще один вопрос:

Я пытаюсь сделать модальное окно, чтобы оно вылезало при клике, а убиралось при клике вне ее границ, но почему-то оно не убирается, как я только не пробовал.

https://www.w3schools.com/code/tryit.asp?filename=...

Можешь, пожалуйста, помочь. И скажи, правильно ли это - совать форму в список li (щелчок по нему должен провоцировать модальное окно) или нет?

Спасибо)

Answer 2

[UNy]

обратите внимание на Elements и Element в классе и айдишнике. Может быть несколько элементов с одинаковым классов которые при .getElementsByClassName кладутся в массив, а айдишник должен быть уникальным.

Comments

[Михаил]

Не массив, а HTMLCollection

[UNy]

Михаил, точно)

[usedtoknow]

нет, исключено