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

Question

[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";
  };

Answer 1

[sriver]

Без классов, если интересует именно добавление / удаление стиля то можно примерно так :

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";
  }
  
};

Comments

[Uzumeti]

Спасибо!

Answer 2

[Сергей Соколов]

Событие одно: клик. Обработчик один, но делает он то одно, то другое.
В переменной держим текущее состояние: виден или нет тот блок:

Comments

[Uzumeti]

Спасибо, благодаря Вашему ответу расширю кругозор. Почитаю что такое let :) Но решение очень сложное, хотел именно через if

[Сергей Соколов]

Uzumeti, let и const – почти то же, что и var, но поинтересуйтесь разницей.

Конструкция условие ? если_правда : если_ложь – почти то же, что

if (условие) {
  если_правда
} else {
  если_ложь
}

Опять же, поинтересуйтесь различием )

Answer 3

[alex4answ]

Не нужно 2 разных функции, и удалять и добавлять событие каждый раз.

1 Вариант - сделать флаг (true, false) и в функции проверять.
2 Вариант - проверять display, если none - показать, block - скрыть. (логичнее этот вариант)

Comments

[Uzumeti]

Спасибо за наводку. Никак не ожидал, что функция выполняет условие if повторно при каждом нажатии. По моей логике оно должно было тоже сработать единоразово. Аналогично событию.

[alex4answ]

Uzumeti, событие не единоразово работает, соответственно функция тоже

Answer 4

[Арсений Матыцин]

Самое примитивное:

<input id="push" type="button" value="..." onclick="document.getElementById('ts1').classList.toggle('hidden');"/>

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