Переключение contenteditable на textarea

Question

Есть рабочий скрипт на javascript при нажатии на кнопку переключается с div=contenteditable на textarea. Но как его оптимизировать, если таких форм будет несколько?

/*Кнопка исходного кода*/
const div_contable = document.querySelector('.div_contable-js');
const source_textarea = document.querySelector('.source_textarea-js');

if (div_contable) {
  const button_source = document.querySelector('.button_source-js');
  button_source.addEventListener("click", function(e) {
    div_contable.classList.toggle('_active');
    source_textarea.classList.toggle('_active');
  });
}

._active {
  display: none
}

.div_contable {
  width: 88%;
  min-height: 80px;
  padding: 5px;
  border-radius: 6px;
  border: 1px solid #CBCFD2;
  background: #D9DBDE;
}

<form method="POST" action="/news/add">
  <div class="div_contable-js div_contable has-border" data-placeholder="Текст сообщения" contenteditable="true"></div>

  <textarea class="text source_textarea-js _active" name="hdntext" maxlength="790" onkeypress="return displayHtml()"></textarea>

  <!-- переключатель contenteditable на textarea -->
  <button class="button_source-js" onclick="return false">Переключатель</button>
</form>

Answer 1

Но как его оптимизировать, если таких форм будет несколько?

<script></script> вызов функции, ранее объявленной, генерирующей кнопки с ID возле вызова себя же; при вызове функции из кнопки парсится <div> до этой кнопки. Вот и всё волшебство.

БЛОГ НА HUSL

Переключение contenteditable на textarea

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