Как сделать повторный клик с иной функцией

Question

Как сделать поочерёдное появление при клике на кнопку(без изчезновения предыдущего действия) 1 клик появилась 1 2 клик появилась 2 3 клив ещё появилась 3 и так далее Вот сам код HTML CSS JS:

<div class="One">1</div>
<div class="Two">2</div>
<div class="Three">3</div>
<button id="button" onclick="Button()"></button>

.One {
opacity: 0;
}
.Two {
opacity: 0;
}
.Three {
opacity: 0;
}

function Button() {
document.getElementsByClassName('One')[0].style= "opacity: 100%;"
document.getElementsByClassName('Two')[0].style= "opacity: 100%;"
document.getElementsByClassName('Three')[0].style= "opacity: 100%;"

Answer 1

Вам необязательно иметь в DOM сразу все элементы, чтобы обеспечить их появление. К тому же при вашем способе ваши элементы хоть и будут невидимы, но будут занимать место и будут доступны для действий с клавиатуры.

Лучше добавлять дополнительные элементы на лету.

const wrapper = document.querySelector('.wrapper');

function addLine() {
  let number = wrapper.querySelectorAll('.item');
  let item = document.createElement('div');
  item.classList.add('item');
  wrapper.appendChild(item);
  item.innerText = number.length + 1;

}

function removeLine(button) {
  let item = wrapper.querySelector('.item:last-child');
  let number = wrapper.querySelectorAll('.item');
  if (number.length > 0) item.remove();
}

.wrapper {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 4px;
}

.item {
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
}

.wrapper-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.button {
  color: #fff;
  fill: #fff;
  background-color: #0055dd;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  border-radius: 4px;
}

.button:hover {
  background-color: #0044cc;
}

<div class="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
</div>
<div class="wrapper-buttons">
  <button class="button add-button" onclick="addLine()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg></button>
  <button class="button remove-button" onclick="removeLine()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 10h24v4h-24z"/></svg></button>
</div>

БЛОГ НА HUSL

Как сделать повторный клик с иной функцией

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