Реализация записной книжки

Question

Выполняю задачу. Надо сделать записную книжку. По вводу текста в инпут, нажимаем кнопку "сохранить". Слева появляется список записей. По нажатию на списки в инпуте появится текст записи. Вопрос: надо сделать так чтобы по нажатию на кнопку "создать", она изменяла режим с добавления на редактирование записей в списке. в коде сделал if с режимом добавления записей в список. А с режимом редактирования этих записей никак не могу понять, как реализовать.

  <div id="wrapper">
        <div id="menu">
            <ul id="notes">
            
            </ul>
            <div id="create">
                <button data-mode="create">создать</button>
            </div>
        </div>
        <div id="text">
            <textarea></textarea>
            <button >сохранить</button>
        </div>
    </div>
    
    <body>
     <script> 
    let button1 = document.querySelector("#text button");
    let textArea = document.querySelector("#text textarea");
    let notes = document.querySelector("#notes");
    let button2 = document.querySelector("#create button");
    
    
    let texts = [];
    
    button2.addEventListener("click", function(){
        if(this.dataset.mode == "create"){
    
            this.dataset.mode="update";
            this.innerHTML = "редактировать";
              console.log(this); 
    
        } else {
    
            this.dataset.mode="create";
            this.innerHTML = "создать";
            console.log(this);
       }     
    })
    
    
    
    button1.addEventListener("click", function(){
         let mode = button2.dataset.mode;
    
      if(mode == "create"){
        texts.push(textArea.value);
        console.log(texts);
       
    
        let li = document.createElement("li");
        let num = texts.length;
        li.innerHTML = "Запись" + "  " + num;
        li.dataset.key = num - 1;
        console.log(li);
        notes.appendChild(li);
        textArea.value = ""
    
        let lis = document.querySelectorAll("li");
         for(let li of lis) {
            li.addEventListener("click", function(){
              
              textArea.value = texts[this.dataset.key];
              console.log(texts[this.dataset.key]);
        })
       } 
     } 
    
        if(mode == "update"){
    
        }  
    })

Answer 1

Я переписал обработчик клика button1:

button1.addEventListener("click", function(){
    let mode = button2.dataset.mode;
    if(mode == "create"){
        texts.push(textArea.value);
        console.log(texts);
        let li = document.createElement("li");
        let num = texts.length;
        li.style.cursor = "pointer";
        li.innerHTML = "Запись " + num;
        li.onclick = () => {
            current = num - 1;
            textArea.value = texts[current];
            textArea.focus();
            console.log(texts[current]);
        }
        console.log(li);
        notes.appendChild(li);
        textArea.value = "";
        textArea.focus();
    }
    if(mode == "update") texts[current] = textArea.value;
})

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

БЛОГ НА HUSL

Реализация записной книжки

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