javascript - 提交后在待办事项列表上编辑我的输入

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。

标签： javascripthtml

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>