文字を自由に変更したいです。

Question

前提・実現したいこと

JavaScriptでtodolistを作っています。
タスクを後から変更できるようにしたいのですが、文字の入力の仕方がわかりません。
検索しても、特定の文字に変えるなどしか見つけれず、検索がうまくいきません。

let plus=document.getElementById("plus-a");
plus.addEventListener('click',function(){
    let newTask = document.getElementById("WantToAdd").value;
    let lists = document.getElementById("todolist-a");
    lists.insertAdjacentHTML("afterbegin","<li><p>◉</p>"+newTask+"<i class='far fa-trash-alt gomi'></i><i class='fas fa-edit edi'></i></li>");
lists.querySelector('.edi').addEventListener('click',function(){
        
    })
});

<div class="task-wrapper">
                        <span style="white-space: nowrap;" class="add-task-wrapper">
                                <form id="form-a" class="add-task-wrappers">
                                    <input type="button" value="+" class="add-mark" id="plus-a">
                                    <input style="background-color:rgb(206, 214, 95)"placeholder="今日やることを追加してください" class="add-task" id="WantToAdd"  value="" >
                                </form>
                        </span>
                        <ul id="todolist-a" class="todolist">
                            <!-- todolistを追加 -->
                        </ul>
                    </div>

inputタグに入力された文字をタスクとして<li>要素で追加してます。
そのタスクの中に編集マークがあり、その部分をクリックするとタスクの文字を変更できるようにしたいです。

Comments

[miyabi_pudding]

丸投げ質問になってるので、まず自分で処理書いていきましょう。

[KojiDoi]

DOMについて調べてみましょう。

Answer 1

ユーザが文字を入力できるのはinputタグだけなので、todoListの中の文字列が入っている要素をjavascriptでinputに変えたらどうですか?

参考リンク
※参考リンク先で使用しているのはjQueryというjavascriptのライブラリです。