Как изменить поведение одного и того же элемента?

Question

[Артур Кудашев]

Я пишу мини редактор текста и у меня возник вопрос.

Есть кнопка:
<button>Редактировать</button>

btn.addEventListener('click', function() {
  //выполняются какие-то действия
  this.innerText = 'Готово';
});

Есть текст и при первом клике на кнопку она создает textarea, куда добавляет этот текст и далее его можно редактировать. Я хочу сделать так чтобы по второму клику она сохранила все изменения и стала выполнять свою первоначальную функцию.

Answer 1

[Митя ТоДаСё]

логика очень простая используем .toggle

$.fn.extend({
    toggleText: function(a, b){
        return this.text(this.text() == b ? a : b);
    }
});

$(".example").on('click', function(){
	$(this).toggleText('создать textarea', 'сохранить результат').toggleClass('active');
  
  
  if($(this).hasClass('active')) {
  	alert('открыли textarea для редактирования');
  }else{
  	alert('созранили и закрыли');
  }
});

как-то так...

Comments

[Митя ТоДаСё]

Да там всего-то пару строчек даже не заменить, а подкорректировать, вот подсказка - Vanilla JavaScript FTW, я думаю справитесь ;)

[Артур Кудашев]

спасибо