Редактирование записей в записной книжке на JavaScript

В предыдущем уроке мы сделали так, что можно просматривать уже созданные записи. Давайте теперь сделаем так, чтобы просматриваемую запись можно было поредактировать.

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

Что же у нас сейчас будет, если при просмотре записи нажать на кнопку сохранения? Просто создастся новая запись с этим текстом.

Итак, давайте поправим ситуацию так, чтобы можно было как сохранять новые записи, так и редактировать уже созданные.

Алгоритм решения

Сделаем так, чтобы нажатие на кнопку в режиме просмотра записи редактировало эту запись, а нажатие на кнопку в режиме создания - создавало новую запись.

Пусть режим задается атрибутом data-mode для нашей кнопки. Пусть, если этот атрибут имеет значение create - кнопка сохраняет новую запись:

<div id="text"> <textarea></textarea> <button data-mode="create">сохранить</button> </div>

А если этот атрибут имеет значение update - пусть кнопка редактирует открытую запись. При этом номер открытой записи будем хранить в атрибуте data-key:

<div id="text"> <textarea></textarea> <button data-mode="update" data-key="3">сохранить</button> </div>

Проиллюстрирую ваш JavaScript код для обработчика клика по кнопке:

button.addEventListener('click', function() { let mode = this.dataset.mode; if (mode == 'create') { // ваш код для создания новой запись } if (mode == 'update') { let key = this.dataset.key; // ваш код для редактирования записи с номером key } });

Смена режимов

Очевидно, что по заходу на страницу сохраненных записей не будет. Это значит, что изначально кнопка должна быть в режиме create.

Затем при нажатии на просмотр любой записи режим кнопки должен меняться на update и в data-key должен записываться номер открытой записи.

Затем при нажатии на просмотр любой записи режим кнопки должен меняться на update и в data-key должен записываться номер открытой записи.

Как же режим будет меняться с редактирования обратно на создание? Я бы предложил, что нажатие на кнопку в режиме редактирования должно обновлять запись и менять режим на создание.

Этого, однако, не достаточно. Ведь мы можем просто просматривать запись, не желая ее редактировать. А потом можем захотеть вернутся в созданию. В этом случае нам нужна еще одна кнопка, которая будет возвращать нас в режим создания.

Вставим эту кнопку в нашу верстку:

<div id="wrapper"> <div id="menu"> <div id="notes"> <ul id="notes"> <li data-key="1">запись 1</li> <li data-key="2">запись 2</li> <li data-key="3">запись 3</li> </ul> </div> <div id="create"> <button>новая запись</button> </div> </div> <div id="text"> <textarea></textarea> <button>сохранить</button> </div> </div>

Реализация

Реализуйте описанное редактирование записей.

Сделайте так, чтобы на экране отображался режим, в котором мы сейчас находимся.