2

Пользователь редактирует текст, кнопка "сохранить" создает запись измененного текста в Local Storage c ключом в виде значения времени сохранения. Задача такая-с помощью select дать пользователю возможность выбрать запись для редактирования. Я сделал так-через цикл получаю ключи записей в select и создаю новые option для select. Как сделать так, чтобы при выборе определенного ключа его контент отображался в текстовом блоке программы?

var editBtn = document.getElementById('edit');
var saveBtn = document.getElementById('save');
var cancelBtn = document.getElementById('cancel');
var editables = document.querySelector('.text');
var storyList = document.querySelector('.story-list');

var lSLength = localStorage.length;



// объявление функции вывода загрузки элементов из localStorage в DOM после обновления страницы
function createSelectOption() {
  if(lSLength > 0) {
    for (i = 0; i < lSLength; i++) {
      var key = localStorage.key(i);
      var o1 = document.createElement('option');
      storyList.appendChild(o1);
      o1.textContent = key;
      
    }
  }
}

createSelectOption();

Data = new Date();
Hour = Data.getHours();
Minutes = Data.getMinutes();
Seconds = Data.getSeconds();


if (typeof (Storage) !== "undefined") {
  if (localStorage.getItem('изменение в ' + Hour + ":" + Minutes + ":" + Seconds) !== null) {
    editables.textContent = localStorage.getItem('изменение в ' + Hour + ":" + Minutes + ":" + Seconds);

    
  }
}

function toggleDisabled() {
  editBtn.toggleAttribute("disabled");
  saveBtn.toggleAttribute("disabled");
  cancelBtn.toggleAttribute("disabled");
}

editBtn.addEventListener('click', function (_e) {
  if (!editables.isContentEditable) {
    editables.contentEditable = true;
    toggleDisabled();
  }
});


// сохраняем данные в localStorage

saveBtn.addEventListener('click', function (_e) {

  localStorage.setItem('изменение в ' + Hour + ":" + Minutes + ":" + Seconds, editables.textContent);
  editables.contentEditable = false;
  toggleDisabled();
});

cancelBtn.addEventListener('click', function (_e) {
  editables.contentEditable = 'false';
  editables.textContent = localStorage.getItem('изменение в ' + Hour + ":" + Minutes + ":" + Seconds);
  toggleDisabled();
});
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web API</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"/>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <h1 class="heading">Осваиваем<span class="badge badge-secondary">Web API</span></h1>
      <div class="wrapper">
        <div class="main-content">
        <select name="story-list" class="story-list"></select>
          <p class="text">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
          impedit tempore a odio culpa, fuga quas laborum. Eligendi error alias,
          optio, possimus, maiores veniam nulla repellendus aliquam officiis
          maxime commodi! Eum reprehenderit quisquam nisi inventore. Saepe et
          nulla quae voluptate, vero cum ullam autem tempore quaerat porro
          inventore blanditiis aliquam eum assumenda consequatur a omnis
          corporis, velit obcaecati labore magni? Aut dolorum vero voluptate
          nesciunt eius ut fugit, corrupti necessitatibus. Impedit tenetur,
          dolore debitis aperiam harum non suscipit odio culpa, fugit atque
          cupiditate illum, enim repudiandae deleniti mollitia tempora deserunt?
          </p>
          <button type="button" id="edit" class="btn btn-primary">Редактировать</button>
          <button type="button" id="save" class="btn btn-success" disabled>Сохранить</button>
          <button type="button" id="cancel" class="btn btn-danger" disabled>Отмена</button>
        </div>
      </div>
    </div>
  </body>
</html>

1 ответ 1

2
storyList.addEventListener("change", function(e) {
  editables.textContent = localStorage.getItem(this.value);
});
3
  • благодарю, работает! Стестяюсь только спросить, что за "change"?)
    – Summersby
    15 сен 2020 в 13:55
  • 1
    @Summersby Не понял вопроса. У кнопки есть событие "click" - Вы его используете в Вашем коде. У элемента select есть событие "change".
    – user176262
    15 сен 2020 в 14:02
  • впервые встречаюсь с событиями select. Теперь понятно, спасибо еще раз!
    – Summersby
    15 сен 2020 в 14:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.