Функция JavaScript не принимает индекс массива, возвращающийся как неопределенный - PullRequest
Новая
       6

Функция JavaScript не принимает индекс массива, возвращающийся как неопределенный

0 голосов
/ 24 сентября 2018

Я создал приложение Crud и у меня есть data (), который принимает Json 

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>

1 Ответ

0 голосов
/ 24 сентября 2018

Вы просто забыли передать аргумент.Попробуйте это пожалуйста: 

// 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>';
...