how to update index of array from jquery and html input-CodePudding

const list = [];

function dlete(index) {
  list.splice(index, 1);
  console.log(list);
  var html = "";
  html  = "<ul id = 'del'>";
  for (var i = 0; i < list.length; i  ) {

    html  = "<li>"   list[i]   " <button onclick='dlete("   i   ")'>dlete</button> <button onclick = 'edit(" i ")' > edit < /button></li > "

    // console.log(list[i]);
  }
  html  = "</ul>";
  $("#show").html(html);
}

function edit(index) {
  $('#enter_task').val(list[index]);

}

$(document).ready(function() {
  $('#add').click(function() {
    var text = $("#enter_task").val();
    list.push(text);
    var html = "";
    html  = "<ul id = 'del'>";
    for (var i = 0; i < list.length; i  ) {

      html  = "<li>"   list[i]   " <button onclick='dlete("   i   ")'>dlete</button> <button onclick='edit("   i   ")'>edit</button></li>"

      // console.log(list[i]);
    }
    html  = "</ul>";
    $("#show").html(html);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Todo List</h1>
<input type="text" id="enter_task" placeholder="Enter Task">
<input type="submit" id="add" value="Add Task">

<div id="show"></div>

i want to update index of array. here is an edit button when click to edit value will insert into input field after updating value i want to submit that value at the same index of array by clicking add task button

CodePudding user response：

Use a separate Update button, and use a global variable to hold the index of the item being edited.

I've moved the code that displays the list into a separate function so we don't have to write it in multiple places.

const list = [];
let edit_index;

function display_list() {
  var html = "";
  html  = "<ol id = 'del'>";
  for (var i = 0; i < list.length; i  ) {

    html  = `<li>${list[i]}<button onclick='dlete(${i})'>dlete</button> <button onclick = 'edit(${i})'>edit</button></li >`

    // console.log(list[i]);
  }
  html  = "</ol>";
  $("#show").html(html);
}

function dlete(index) {
  list.splice(index, 1);
  console.log(list);
  display_list();
}

function edit(index) {
  $('#enter_task').val(list[index]);
  $("#update").text(`Update item ${index 1}`).show();
  edit_index = index;
}

function update() {
  if (edit_index !== undefined) {
    list[edit_index] = $("#enter_task").val();
    display_list();
  } else {
    alert("You must click on Edit first");
  }
}

$(document).ready(function() {
  $('#add').click(function() {
    var text = $("#enter_task").val();
    list.push(text);
    display_list();
  });
  $("#update").click(update);
});

#update {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Todo List</h1>
<input type="text" id="enter_task" placeholder="Enter Task">
<input type="submit" id="add" value="Add Task">
<button type="button" id="update"></button>
<div id="show"></div>