Как сделать кнопку cancel для textarea?

Question

[Callin]

Есть поле для ввода и для него нужно сделать кнопки cancel и save , которые появляются при нажатии на edit. Когда нажимаешь на edit поле с текстом можно изменять. Но как сделать , чтобы когда нажимаешь на cancel все новое , что ввел пользователь убиралось и текстовое поле имело изначальное значение

https://jsfiddle.net/tqz36bx9/1/

Comments

[v3shin]

При редактировании записывайте value в data, при отмене - меняйте value на значение из data.

[iBird Rose]

сохраняй значение, которое было до edit куда-то, а потом просто при cancel заменяй значение этими данными

[Callin]

v3shin, что такое data и где её найти , сори я новичок

[Callin]

iBird Rose, не работает

[v3shin]

Callin, https://developer.mozilla.org/ru/docs/Learn/HTML/H...

[Callin]

v3shin, спасибо , получилось

Answer 1

[Алексей Ярков]

https://jsfiddle.net/yarkov_aleksei/1d4uv3eL/6/

<textarea cols="60" rows="10"></textarea>
<button id="cancel">Cancel</button>
<button id="save">Save</button>

const textarea = document.querySelector('textarea');
const cancelButton = document.querySelector('#cancel');
const saveButton = document.querySelector('#save');

saveButton.addEventListener('click', (e) => {
	textarea.dataset.initialValue = textarea.value;
});

cancelButton.addEventListener('click', (e) => {
	textarea.value = (textarea.dataset.initialValue || '');
});

Comments

[Callin]

Спасибо