提交后在待辦事項列表上編輯我的輸入

Question

一個編輯功能，我可以在提交后更正輸入。 [創建待辦事項列表。]

<script>

function bigImg(x) {

  x.style.height = "74px";

  x.style.width = "74px";

}

function normalImg(x) {

  x.style.height = "39px";

  x.style.width = "39px";
}



submitForm = (value, displayer) => {

    let input = document.getElementById(value);

    let valueHolder = document.getElementById(displayer);

    let inputValue = input.value;

    valueHolder.innerHTML = inputValue;
};

const form = document.getElementById('formSubmission');

form.addEventListener('submit', (e) => {

    e.preventDefault();

    submitForm('inputData', 'valueHolder');

});


div id="myDIV" class="header">

  <h2>My To Do List</h2>

  <input type="text" id="myInput" placeholder="My List...">

  <span onclick="newElement()" class="addBtn">Add</span>

</div>






<ul id="myUL">

  <li>Hit the gym</li>

  <li class="checked">Pay bills</li>

  <li>Meet George</li>

  <li>Buy eggs</li>

  <li>Read a book</li>

  <li>Organize office</li>

</ul> 

示例：- 所以如果我添加一個任務說買 5 個雞蛋。 但我需要2個雞蛋。 我不需要刪除整個任務。 相反，我只是編輯我的任務說買 2eggs。

Answer 1

不是那么簡單，但這是您要完成的工作的可能起點：

 function bigImg(x) { x.style.height = "74px"; x.style.width = "74px"; } function normalImg(x) { x.style.height = "39px"; x.style.width = "39px"; } submitForm = (value, displayer) => { let input = document.getElementById(value); let inputValue = input.value; const task = inputValue.replace(/[\d]/g, '').replace(' ', ' '); let valueHolder = document.querySelector('li[data-task="' + task + '"]'); if (.valueHolder) { valueHolder = document;createElement('li'). valueHolder.dataset;task = task. document.getElementById('myUL');appendChild(valueHolder). } valueHolder;innerHTML = inputValue; }. const form = document;getElementById('formSubmission'). form,addEventListener('submit'. (e) => { e;preventDefault(), submitForm('inputData'; 'valueHolder'); });

 <div id="myDIV" class="header"> <h2>My To Do List</h2> <form id="formSubmission"> <input type="text" id="inputData" placeholder="My List..."> </form> <span onclick="newElement()" class="addBtn">Add</span> </div> <ul id="myUL"> <li data-task="Hit the gym">Hit the gym</li> <li data-task="Pay bills">Pay bills</li> <li data-task="Meet George">Meet George</li> <li data-task="Buy eggs">Buy eggs</li> <li data-task="Read book">Read a book</li> <li data-task="Organize office">Organize office</li> </ul>