formで出力したテキストの編集機能を付けたい

Question

前提・実現したいこと

GoogleKeepのようなアプリを作っているのですが、「formで入力した値を表示」まではできたものの、「クリックしたら中央に拡大表示され、中身を編集する」事がどうしてもできません。

該当のソースコード

    const form = document.getElementById("form");
    const textarea = document.getElementById("textarea");
    const ul = document.getElementById("ul");


    form.addEventListener("keydown", function (event) {
      if (event.keyCode == 13 && !event.shiftKey ){ //formでenterを押したら実行、shift+enterで改行
        event.preventDefault(); 
        add(); 
      }
    });
    
    function add(memo) { 
      let textareas = textarea.value;
      if (textareas.length > 0) { //入力した値が0より多ければ実行 
        const li = document.createElement("li");
        li.innerText = textareas;
        li.classList.add("list-group-item"); //classを追加
        li.id = 'liid' //idを追加
        ul.appendChild(li); //子要素に
        textarea.value = ""; //値を空に
      }
    }

    ul.addEventListener('click', function() {
      change();
    });

    function change() {
      const memoli = document.getElementById("liid");
      let memolis = memoli.value;
      const textarea = document.createElement("textarea");
      textarea.innerText = memolis;
    }

試したこと

formのtextareaをliに変換し表示させているので、逆にliをtextareaに戻せば編集できるのではと考えましたが、どうにも動いてもらえず立ち止まっています

Answer 1

コードを見た限りでは全てに同じidが振られています。
個別のidを振らないことにはJavascriptでは正常動作してくれません（そもそも「id」なので重複は不可です）

また、それぞれ編集させるのでしたら「クリックした行」を取得する必要があるのでevent.currentTargetを利用することになりますし、編集後に戻す際に戻し先としてどこかに（hiddenとか）保持する必要があります。

Comments

[Pogils]

idを振り分けるのにfor文を使用してみましたが、これまた上手くいきませんでした。
for (let i = 0; i<10; i++){
li.id = 'liid-[i];
};
お恥ずかしい限りですが知恵をお貸して頂きたいです。

[m.ts10806]

このforの根拠とどこに入れたのか知りたいです。
addする要素に対して個別に振れば良いので、いちいちforで回す必要はないかと。
それにli.idに対して上書きし続けてるのでliid-9だけになるでしょうし、そもそもJavascriptの文字列連結としても構文エラーです。

[Pogils]

メモ帳のようなアプリなので、変則的に増減するだろうと思いIDに1を加算させ続ければ良いと思ってました。
そうなんですね。勉強不足で申し訳ないです。
どうすれば個別に振れるのか教えていただけないでしょうか…

[m.ts10806]

list-group-itemというクラスを振ってるならquerySelectorAllで取得した件数をそのままidに付加するとか。
難しければグローバルにカウンタ用の変数設けてaddのたびに加算。

[Pogils]

ご返信遅れまして誠に申し訳ございません。
"グローバルにカウンタ用の変数設けてaddのたびに加算"の、加算方法が良く分からないのですが、
for (let i = 0 ;割合){
li.id += i;
｝
で大丈夫ですか？

Answer 2

GoogleKeepのようなアプリ

にするには、fileやDBに書いたメモの内容を保存する必要あると思います。というのが前提で…

中央に拡大表示され、

"モーダルウィンドウ"等で検索してみると良いと思います。

中身を編集する

textareaでない要素でメモ編集したい場合、その要素（例えば今回なら#ul）のcontentEditable属性をtrueにするというのも、良いかもしれません。

参考

• Material Design > Dialogs
• 初心者でも分かる！モーダルウィンドウの作り方
• HTML Standard > 6.8.1 Making document regions editable: The contenteditable content attribute
• 君はHTML5の contentEditable 属性を知っているか ｜ Tips Note by TAM

Comments

[Pogils]

ご返信遅れまして誠に申し訳ございません。
モーダルウィンドウですか！ありがとうございます、参考になりました。
URLも載せて頂いて有難いです。