質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 301

score 0

前提・実現したいこと

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に戻せば編集できるのではと考えましたが、どうにも動いてもらえず立ち止まっています

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/11/25 14:21

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

    キャンセル

  • 2021/11/25 14:27

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

    キャンセル

  • 2021/11/25 16:06 編集

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

    キャンセル

  • 2021/11/25 16:43 編集

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

    キャンセル

0

GoogleKeepのようなアプリ

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

中央に拡大表示され、

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

中身を編集する

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

参考

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る