Updating array in Todo list in javascript-CodePudding

I have been trying every method to update an array in my todo list using Javascript. But I am stuck in update function. I have tried every method possible but nothing seems to work. Can anyone please help? I have been stuck in the Update function for days now.I have declared the ind as a global variable. Assigned value in Edit functiion and called it back in update function. But still not working. Not sure, what the exact way is to update my array todo list in JS. Below is my code.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arrays</title>
</head>
<script>
  var arr = ["A", "B", "C"];
  var ind;

  function display() {
    var dom = "<ul>";
    for (i = 0; i < arr.length; i  ) {
      dom  = "<li>"   arr[i]   "<input type='button' value='Edit' onclick='Edit("   i   ")'></li>"
    }
    dom  = "</ul>";
    document.getElementById("do").innerHTML = dom;
  }

  function Selection(s) {
    var ip = document.getElementById("input").value.trim();
    var s;
    switch (s) {
      case 'op1':
        arr.push(ip);
        display();
        break;
      case 'op2':
        arr.pop();
        display();
        break;
      case 'op3':
        arr.shift();
        display();
        break;
      case 'op4':
        arr.unshift(ip);
        display();
        break;

    }
  }
  }

  function Edit(ind) {
    //alert(ind);
    document.getElementById("editList").style.display = "Block";
    document.getElementById("val").value = arr[ind];
    ind = ind;
  }

  function update() {
    Edit();
    var updte = document.getElementById("val").value;
    arr[ind] = updte;
  }
</script>

<body onl oad="display()">
  <h1>To Do List</h1>
  <div id="do"></div>
  Enter data : <input type="text" id="input"><br><br>
  <input type="button" value="op1" onclick="Selection 
        ('op1')">&nbsp;
  <input type="button" value="op2" onclick="Selection('op2')">&nbsp;
  <input type="button" value="op3" onclick="Selection('op3')">&nbsp;
  <input type="button" value="op4" onclick="Selection('op4')">&nbsp;

  <span id="select"></span>

  <div id="editList" style="display:none">
    <h2> Edit ToDo List</h2><br> To be updated: <input type="text" id="val"><br>
    <input type="button" value="Update" onclick="update()">
  </div>
</body>

</html>

CodePudding user response：

try to use let i in for (i = 0; i < arr.length; i )

like this:

for (let i = 0; i < arr.length; i ) {

CodePudding user response：

You need to have a way to know the actual ind when you click on the update button.

I have done it using dataset. Have a look at your edit and update functions below.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arrays</title>

  <script>
    var arr = ["A", "B", "C"];
    var ind;

    function display() {
      var dom = "<ul>";
      for (i = 0; i < arr.length; i  ) {
        dom  = "<li>"   arr[i]   "<input type='button' value='Edit' onclick='Edit("   i   ")'></li>"
      }
      dom  = "</ul>";
      document.getElementById("do").innerHTML = dom;
    }

    function Selection(s) {
      var ip = document.getElementById("input").value.trim();
      var s;
      switch (s) {
        case 'op1':
          arr.push(ip);
          display();
          break;
        case 'op2':
          arr.pop();
          display();
          break;
        case 'op3':
          arr.shift();
          display();
          break;
        case 'op4':
          arr.unshift(ip);
          display();
          break;

      }
    }

    function Edit(ind) {
      //alert(ind);
      document.getElementById("editList").style.display = "Block";
      document.getElementById("val").value = arr[ind];
      document.getElementById("val").dataset.ind = ind
      ind = ind;
    }

    function update() {
      //Edit();
      var updte = document.getElementById("val").value;
      ind = document.getElementById("val").dataset.ind
      arr[ind] = updte;
      display()
    }
  </script>
</head>

<body onl oad="display()">
  <h1>To Do List</h1>
  <div id="do"></div>
  Enter data : <input type="text" id="input"><br><br>
  <input type="button" value="op1" onclick="Selection 
        ('op1')">&nbsp;
  <input type="button" value="op2" onclick="Selection('op2')">&nbsp;
  <input type="button" value="op3" onclick="Selection('op3')">&nbsp;
  <input type="button" value="op4" onclick="Selection('op4')">&nbsp;

  <span id="select"></span>

  <div id="editList" style="display:none">
    <h2> Edit ToDo List</h2><br> To be updated: <input type="text" id="val"><br>
    <input type="button" value="Update" onclick="update()">
  </div>
</body>

</html>

CodePudding user response：

Check at lines 46 and remove } symbol above edit function. You have 1 unnecessary symbol at this line