Как Toggle Class использовать в двух разных местах на одной странице (два класса — два скрипта)?

Question

[Боб Семович]

На одной странице есть два различных элемента и и при клике на одну кнопку должен появляться toggle класс в одном месте, а при клике на другую - появляется toggle класс в другом месте.
Вот мой скриптик:

<script>
	function myFunction() {
		var element = document.getElementById("header");
		element.classList.toggle("header-open");
	}
</script>

<script>
	function myFunction() {
		var element = document.getElementById("my333");
		element.classList.toggle("navtop_open");
	}
</script>

Скрипт не работает. Как быть?

Comments

[Kovalsky]

Появляется toggle класс - это вы хорошо сказали.

По теме: в коде который вы привели просто объявляются две функции, и всё. Больше ничего не происходит.

UPD: ой, и правда, одна ведь даже функция. Не заметил

[Rustam Bainazarov]

Я ничего не понял, кроме как то, что у двух разных функций почему-то одно название.

Answer 1

[Хороший UI]

Сейчас вы просто написали функцию, но нет никаких условий для её выполнения
Вам надо выбрать на какой элемент повесить событие, что бы при клике выполнялась ваша функция.
Например:
const btn1 = document.querySelector('.btn1');

Далее на эту кнопку надо повесить событие click и указать какая функция должна выполняться при этом событии:

btn1.addEventListener("click", myFunction);
Обратите внимание, что функция в при навешивании в обработчик пишется без ().