Как реализовать появление блока при нажатии на кнопку? JS

Question

Нужно, чтоб при нажатии на кнопку "Редактировать", вместо li c надписью "Hello" и кнопками появлялся input и кнопочка "Сохранить".

addEventListener уже поставил, но не могу понять через что, или как заменять содержимое li?

Пишу на чистом JS, поэтому реализовать нужно на нем (jQuery использовать нельзя).

Answer 1

Вот пример от которого Вы можете оттолкнуться:

const handleEditClick = () => {
  document.querySelector(".wrapper-one").classList.add("hide")
  document.querySelector(".wrapper-two").classList.remove("hide")
}

document.querySelector(".edit").addEventListener("click", handleEditClick)

const handleSaveClick = () => {
  console.log("сохранено")
}

document.querySelector(".save").addEventListener("click", handleSaveClick)

.hide {
  display: none;
}

<div class="wrapper-one">
  <li>Hello</li>
  <button class="edit">Редактировать</button>  
</div>

<div class="wrapper-two hide">
  <input />
  <button class="save">Сохранить</button>  
</div>

БЛОГ НА HUSL

Как реализовать появление блока при нажатии на кнопку? JS

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