javascript - JavaScript函数不将数组索引返回为未定义

Question

我创建了一个 Crud 应用程序并有一个接受 Json 的 data()

user = {name: name,  age: age, email: email,  dob: do} 

作为输入。

当我调用 editUser() 时，没有采用数组索引。

但是当我通过控制台静态传递数组索引时，该函数可以正常工作。

我应该如何纠正错误？我也有一个 updateUser() 也面临同样的问题。

function read(users) {

  var html = "<table border='1|1' class=\"table container\">";
  var userhtml = document.getElementById('user');
  userhtml.innerHTML = '';

  var t = Object.keys(users[0]);

  for (var i = 0; i <= 0; i++) {

    html += "<tr>";
    html += "<th>" + t[0] + "</th>";
    html += "<th>" + t[1] + "</th>";
    html += "<th>" + t[2] + "</th>";
    html += "<th>" + t[3] + "</th>";
    html += "<th>" + " Edit" + "</th>";
    html += "<th>" + "Delete" + " </th>";
    html += "</tr>"
    for (var j = i; j < users.length; j++) {
      html += "<tr>";
      html += "<td>" + users[j].name + "</td>";
      html += "<td>" + users[j].age + "</td>";
      html += "<td>" + users[j].email + "</td>";
      html += "<td>" + users[j].dob + "</td>";

      html += "<td>" + "<a href='#' onclick='editUser()'>Edit</a>" + "</td>";
      html += "<td>" + "<a href='#' onclick='deleteUsers()'>Delete</a>" + "</td>";

      html += "</tr>";
    }
    html += "</table>";
    document.getElementById("user").innerHTML = html;
  }
}

function editUser(index) {
  debugger;
  var userhtml1 = document.getElementById('edit');
  userhtml1.innerHTML = '';
  for (var i = 0; i < users.length; i++) {
    if (i == index) {
      userhtml1.innerHTML += ' <div class="user"> Name :<input id="EditName" type="text" value ="' + users[i].name + '"><br />' +
        'Age :<input id="EditAge" type="text" value="' + users[i].age + '"> <br /> ' +
        'Email :<input id="EditEmail" type="text" value="' + users[i].email + '"> <br /> ' +
        'DOB :<input id="EditDOB" type="text" value="' + users[i].dob + '"> <br /> ' +
        '<button class="edit" onclick="updateUser()">Update</button>';
    } else {

      userhtml1.innerHTML += '';
    }
  }
}
 function updateUser(index) {
        debugger;
        var updatename = document.getElementById('EditName').value;
        var updateage = document.getElementById('EditAge').value;
        var updateemail = document.getElementById('EditEmail').value;
        var updatedob = document.getElementById('EditDOB').value;

        if (updatename == '' || updateemail == '' || updateage == '' || updatedob == '') {
            alert("Please Fill the Fields!");
        }
        else {
            users[index].name = updatename;
            users[index].email = updateemail;
            users[index].age = updateage;
            users[index].dob = updatedob;
            read(users);
        }
    }

<form action="#" onsubmit="data(name, age, email, dob)">
  <!--data(name, age, email, dob)-->
  <!--onsubmit="return validate()"-->
  <div class="form-group">
    <label class="form-text">Name :</label>
    <input type="text" id="Name" placeholder="Enter Name" class="form-control" " />
                <span id="ErrorName " class="text-danger "></span>
            </div>
            <div class="form-group ">
                <label class="form-text ">Age :</label>
                <input type="text " id="Age " placeholder="Enter Age " class="form-control "  />
                <span id="ErrorAge " class="text-danger "></span>
            </div>
            <div class="form-group ">
                <label class="form-text ">Email :</label>
                <input type="text " id="Email " placeholder="Enter Email " class="form-control "  />
                <span id="ErrorEmail " class="text-danger " />
            </div>
            <div class="form-group ">
                <label class="form-text ">Password  :</label>
                <input type="password " id="Password " placeholder="Enter Password " class="form-control " />
                <span id="ErrorPassword " class="text-danger "></span>
            </div>
            <div class="form-group ">
                <label class="form-text ">Confirm Password  :</label>
                <input type="password " id="ConfirmPassword " placeholder="Confirm Password " class="form-control " onblur=" " />
                <span id="ErrorConfirmPassword " class="text-danger "></span>
            </div>
            <div class="form-group ">
                <label class="form-text ">Date of Birth :</label>
                <input type="date " id="DOB " class="form-control " />
                <span id="ErrorDOB " class="text-danger "></span>
            </div>

            <div class="form-group col-lg-12 text-center ">
                <input type="submit " id="Submit " class="btn btn-success " />
            </div>

        </form>
        <div class="container " id="user ">
        </div>
        <br />

        <div class="form-group " id="edit ">
        </div>

标签： javascriptarraysjsoncrud

Answer 1

你只是忘了传递论点。请试试这个：

// Change this line
html += "<td>" + "<a href='#' onclick='editUser()'>Edit</a>" + "</td>";

// For this one
html += "<td>" + "<a href='#' onclick='editUser("+j+")'>Edit</a>" + "</td>";

另外，请注意，您的 for 语句只执行一次。您可以将其删除，而内部代码保持不变。

// This executes only once, no matter what.
for (var i = 0; i <= 0; i++) { // <-- remove this
  // your code..
} // <-- remove this

// Because it would be the same as just doing:
// your code..

编辑 updateUser 问题：

// For the updateUser problem, note that I added the i variable for the call:
userhtml1.innerHTML += ' <div class="user"> Name :<input id="EditName" type="text" value ="' + users[i].name + '"><br />' +
        'Age :<input id="EditAge" type="text" value="' + users[i].age + '"> <br /> ' +
        'Email :<input id="EditEmail" type="text" value="' + users[i].email + '"> <br /> ' +
        'DOB :<input id="EditDOB" type="text" value="' + users[i].dob + '"> <br /> ' +
        '<button class="edit" onclick="updateUser('+i+')">Update</button>';