uzumeti
@uzumeti

Как скрывать/показывать блок при кликах на одну кнопку?

Задача: Нужно сделать два события на одной кнопке. Кнопку нажали - появился блок. Кнопку нажали второй раз - пропал блок.

Попытка решения:

<div id="ts1" class="ta1">
Привет
</div>
<input id="push" type="button" value="Нажми меня"/>

<script>
var knopka = document.getElementById ('push');
knopka.addEventListener('click',func1);
knopka.removeEventListner ('click',func1);
knopka.addEventListener('click',func2);
 
function func1() {
  var shadow = document.getElementById ('ts1');
  shadow.style.display="none";
  };
 
  function func2() {
  var shadow = document.getElementById ('ts1');
  shadow.style.display="block";
  };
  • Вопрос задан
  • 4601 просмотр
Решения вопроса 4
@sriver
js newbie
Без классов, если интересует именно добавление / удаление стиля то можно примерно так :
var knopka = document.getElementById ('push');
knopka.addEventListener('click',func1);
 
function func1() {
  var shadow = document.getElementById ('ts1');
  if (shadow.style.display !== 'none'){
  	shadow.style.display="none";
  }else{
  	shadow.style.display="block";
  }
  
};
Ответ написан
sergiks
@sergiks Куратор тега JavaScript
♬♬
Событие одно: клик. Обработчик один, но делает он то одно, то другое.
В переменной держим текущее состояние: виден или нет тот блок:
Ответ написан
alex4answ
@alex4answ
Не нужно 2 разных функции, и удалять и добавлять событие каждый раз.

1 Вариант - сделать флаг (true, false) и в функции проверять.
2 Вариант - проверять display, если none - показать, block - скрыть. (логичнее этот вариант)
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
Руководитель frontend направления, предприниматель
Самое примитивное:
<input id="push" type="button" value="..." onclick="document.getElementById('ts1').classList.toggle('hidden');"/>


К этому диву должен быть прописан универсальный или частный случай класса hidden, тогда сработает.
Если используется бутстрап к примеру, то есть там .d-none. Впрочем, если есть бут, то есть и jQuery (не обязательно).
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы