Как отменить действие при повторном нажатии в моём примере

Question

Отменить действие при повторном нажатии на кнопку

var searchblock = document.getElementsByClassName("searchblock");
var button = document.getElementsByClassName("button");
button[0].addEventListener("click", function (e) {
  searchblock[0].style.marginTop = 100 + "px";
  searchblock[0].style.transition = 1000 + "ms";
  searchblock[0].style.height = 100 + "px";
})

Answer 1

Ели уже пустой style - добавляем, нет - очищаем. Это нужно?

var searchblock = document.getElementsByClassName("searchblock");
var button = document.getElementsByClassName("button");

button[0].addEventListener("click", function (e) {
  if (searchblock[0].style.marginTop) {
    searchblock[0].style.marginTop = "";
    searchblock[0].style.transition = "";
    searchblock[0].style.height = "";
  } else {
    searchblock[0].style.marginTop = 100 + "px";
    searchblock[0].style.transition = 1000 + "ms";
    searchblock[0].style.height = 100 + "px";
  }
})

Answer 2

Ниже примеры с условием, что количество кнопок совпадает с количеством элементов, которым надо менять стили.

Вариант первый: Добавляем класс "клика". Тут все элементы одинаковы по стилям

const searchblock = document.getElementsByClassName("searchblock");
const button = document.querySelectorAll(".button");

button.forEach((el, idx) => {
  el.addEventListener('click', () => {
    searchblock[idx].classList.toggle('searchblock_click');
  })
})

.searchblock {
  margin-top: 30px;
  transition: 1000ms;
  height: 30px;
  width: 100px;
  border: #000066 1px solid;
}

.button {
  width: 35px;
}

.searchblock_click {
  margin-top: 50px;
  transition: 500ms;
  height: 50px;
}

<div style="display: flex">
  <div class="searchblock">search</div>
  <div class="searchblock">search</div>
  <div class="searchblock">search</div>
</div>
<div style="display: flex">
  <div class="button" style="width: 30px">btn</div>
  <div class="button" style="width: 30px">btn</div>
  <div class="button" style="width: 30px">btn</div>
</div>

Вариант второй: Все элементы уникальны по стилям(используя замыкание, сохраняем начальные значения элементов и меняем их местами по значению флага)

const searchblock = document.getElementsByClassName("searchblock");
const button = document.querySelectorAll(".button");

button.forEach((el, idx) => {
  let margin = searchblock[idx].style.marginTop;
  let transition = searchblock[idx].style.transition;
  let height = searchblock[idx].style.height;
  let direction = true;
  el.addEventListener('click', function(e) {
    if (direction) {
        const rnd = Math.round(Math.random()* 30);
        searchblock[idx].style.marginTop = 200 + rnd + "px";
        searchblock[idx].style.transition = 1000 + "ms";
        searchblock[idx].style.height = 20 + rnd + "px";
    } else {
      searchblock[idx].style.marginTop = margin;
      searchblock[idx].style.transition = transition;
      searchblock[idx].style.height = height;
    }
    direction = !direction;
  })
})

<div style="display: flex">
  <div class="searchblock" style="margin-top: 20px; transition: 500ms; height: 30px; width: 100px; border: #000000 1px solid">search</div>
  <div class="searchblock" style="margin-top: 30px; transition: 1500ms; height: 40px; width: 100px; border: #000000 1px solid">search</div>
  <div class="searchblock" style="margin-top: 40px; transition: 1000ms; height: 50px; width: 100px; border: #000000 1px solid">search</div>
</div>
<div style="display: flex">
  <div class="button" style="width: 30px">btn</div>
  <div class="button" style="width: 30px">btn</div>
  <div class="button" style="width: 30px">btn</div>
</div>

БЛОГ НА HUSL

Как отменить действие при повторном нажатии в моём примере

Ответы (2 шт):