Не работает переключатель, как исправить?

Question

[DimaD0106d]

Сайт: https://cleverslider.000webhostapp.com/

<div class="container-activatedOptions">
		<form class="form-activatedOptions">
			<button class="activatedOptions" class="deactivatedOptions" onclick="toglleNav();">Открыть настройки</button>
		</form>
	</div>

activatedOptions.onclick = function(){
	options.style.display = 'block'
	activatedOptions.innerHTML = 'Закрыть настройки'
	deactivatedOptions.add()
	activatedOptions.toggle('deactivatedOptions')
	activatedOptions.remove()
	return false
}

deactivatedOptions.onclick = function(){
	options.style.display = 'none'
	activatedOptions.innerHTML = 'Открыть настройки'
	activatedOptions.add()
	deactivatedOptions.toggle('activatedOptions')
	deactivatedOptions.remove()
	return false
}

Comments

[Алексей Дубровин]

Пожалуй запишу это в фановые задачки, раздел вопросы для сеньора помидора.
"Что произойдёт в данном коде"

[DimaD0106d]

Алексей Дубровин, я на форуме прочитал, типо переключатель классов нужно сделать, я и сделал, а оно не работает(

[Алексей Дубровин]

DimaD0106d,
Ну исходя из этого кода, что вы скинули сюда. Вы вешаете все 3 обработчика на 1 кнопку. При этом вы их перезатираете.
Также вы вешаете 2 класса) что опять же должны перезатираться.
Тк же вы используете методы которых нет у дом узлов. что должно вызывать фатальные ошибки
Вы возвращаете false. Что сбивает. Тк как ты пытаешься понять зачем.
Потом когда ты понял что это кнопка в форме, ты просто такой Ы. Все кнопки в форме при взаимодействии перезагружают страницу.

Тк что это ультрахардкор)
Но я узнал для себя новое " что, если добавлять 2 класса на элемент, будет работать 1"

Answer 1

[Vlad]

В вашем случае, как мне кажется, стоит переделать вот так

<div class="container-activatedOptions">
    <form class="form-activatedOptions">
        <button id="optionsToggle">Открыть настройки</button>
    </form>
    <div id="options">
        Тут опции...
    </div>
</div>

disabledOptions(); // Изначальное состояние

function activatedOptions(){
    options.style.display = 'block';
    optionsToggle.innerHTML = 'Закрыть настройки';
    optionsToggle.onclick = disabledOptions;
    return false;
}

function disabledOptions(){
    options.style.display = 'none';
    optionsToggle.innerHTML = 'Открыть настройки';
    optionsToggle.onclick = activatedOptions;
    return false;
}