JS: TODOLIST - EDIT/Update Item

Question

I'm a beginner.. no idea how to replace new 'input value' when I click 'update' button.

I add 'input' when i click 'edit' button.

I want to write something in the new 'input' and when i click 'update(previously 'edit' button)' then want the new input value. (basically update the item or replace to the new value)

const itemName = document.querySelector('.item_name');
const editBTN = document.querySelector('.item_edit');
const newItemInput = document.createElement('input');
editBTN.addEventListener('click', (event) => {
  console.log('dfdfdfdf');
  itemName.innerHTML = '';

  newItemInput.type = 'text';
  newItemInput.className = 'newItemInput';
  itemName.appendChild(newItemInput);
  newItemInput.focus();

  editBTN.innerText = 'Update';

  updateItem();
});

function updateItem() {
  const updatedItem = newItemInput.value;
  editBTN.addEventListener('click', () => {
    const newSpan = document.createElement('span');
    itemName.appendChild(newSpan);
  })


};

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<section class="list">
  <header class="header">Shopping List</header>
  <ul class="items">
    <li class="item_row">
      <div class="item">
        <input type="checkbox" id="item_name_check" value="1" />
        <label for="item_name_check"><span class="item_name">Egg</span></label>
        <div class="button_container">
          <button class="item_edit">Edit</button>
          <button class="item_delete">
            <i class="fas fa-trash-can"></i>
          </button>
        </div>
      </div>
    </li>
  </ul>
  <form class="new_form">
    <footer class="footer">
      <input type="text" class="footer_input" />
      <button type="submit" class="footer_button">
        <i class="fas fa-plus"></i>
      </button>
    </footer>
  </form>
</section>

todolist : CRUD

Update items

Edit items

Javascript

Answer 1

Since we are reusing the Edit button as the Update button, have a conditional within the event listener to check which state it is, by checking its text content:

editBTN.addEventListener('click', (event) => {
  if (event.target.innerText === 'Update') {
    // …
  } else {
    console.log('dfdfdfdf');
    itemName.innerHTML = '';
    // …
  }
});

We don't need the updateItem() function.

In the truthy if branch:

// Set the item name to the value inside the `<input>`, removing the `<input>`.
itemName.innerText = newItemInput.value;

// Set the `<input>` back to empty for the next edit.
newItemInput.value = '';

// Revert the Update button text back to Edit.
editBTN.innerText = 'Edit';

Putting it all together:

const itemName = document.querySelector('.item_name');
const editBTN = document.querySelector('.item_edit');
const newItemInput = document.createElement('input');

editBTN.addEventListener('click', (event) => {
  if (event.target.innerText === 'Update') {
    itemName.innerText = newItemInput.value;
    newItemInput.value = '';
    editBTN.innerText = 'Edit';
  } else {
    console.log('dfdfdfdf');
    itemName.innerHTML = '';

    newItemInput.type = 'text';
    newItemInput.className = 'newItemInput';
    itemName.appendChild(newItemInput);
    newItemInput.focus();

    editBTN.innerText = 'Update';
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<section class="list">
  <header class="header">Shopping List</header>
  <ul class="items">
    <li class="item_row">
      <div class="item">
        <input type="checkbox" id="item_name_check" value="1" />
        <label for="item_name_check"><span class="item_name">Egg</span></label>
        <div class="button_container">
          <button class="item_edit">Edit</button>
          <button class="item_delete">
            <i class="fas fa-trash-can"></i>
          </button>
        </div>
      </div>
    </li>
  </ul>
  <form class="new_form">
    <footer class="footer">
      <input type="text" class="footer_input" />
      <button type="submit" class="footer_button">
        <i class="fas fa-plus"></i>
      </button>
    </footer>
  </form>
</section>