JavaScript待办事项列表Array更新函数异常，求助解决方案

原代码存在几个关键错误导致update函数失效，逐一修复后即可正常工作：

核心错误点 #

• Selection函数末尾多了一个多余的闭合大括号}，导致后续JS代码解析失败
• Edit函数中参数名ind与全局变量重名，修改局部变量无法同步到全局变量
• update函数中无需调用Edit()（反而会覆盖全局ind为undefined），且更新数组后未调用display()刷新页面
• display函数的循环变量i未声明，会成为全局变量引发潜在问题

修复后的完整代码 #

<!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 (let 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();
    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(index) {
    document.getElementById("editList").style.display = "Block";
    document.getElementById("val").value = arr[index];
    // 将选中索引赋值给全局变量
    ind = index;
  }

  function update() {
    var updte = document.getElementById("val").value.trim();
    // 使用全局保存的索引更新数组
    arr[ind] = updte;
    // 更新后刷新页面显示
    display();
    // 隐藏编辑框提升体验
    document.getElementById("editList").style.display = "none";
  }
</script>

<body onload="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>

修复说明 #

1. 移除多余大括号：删除Selection函数末尾多余的}，确保JS代码正常解析
2. 全局变量赋值：Edit函数将参数名改为index避免重名，把选中索引赋值给全局ind
3. update函数优化：去掉无效的Edit()调用，直接用全局ind更新数组，完成后调用display()刷新页面并隐藏编辑框
4. 声明循环变量：display函数用let i声明循环变量，避免全局变量污染

内容的提问来源于stack exchange，提问作者anonymous