Javascript 单击“编辑”按钮时无法显示编辑表单？

我制作了一个联系人列表应用程序，可以显示联系人详细信息。默认情况下，它显示2个联系人详细信息。 在

index.html

中，我创建了两个函数，分别称为

showContacts（）

和

editContact（id）

我在

index.html中动态填充
div
标记，即
editcontact
&
contactlist

当我点击编辑按钮时，它应该显示3个输入元素以获取用户输入，一个提交按钮我试图实现它（见下面的代码），但只有搜索栏消失，只有默认联系人显示，不应该显示，它应该显示编辑表单


var数组=[]；
职能人员（全名、编号、组）{
this.fullName=fullName；
这个数字=数字；
this.group=组；
array.push（这个）；
}
Person.prototype.getFullName=函数（）{
返回this.fullName+''+this.number+''+this.group；
}
变量p1=新人（“Jonathan Buell”，5804337551，“家庭”）；
变量p2=新人（“帕特里克·丹尼尔”，8186934432，“工作”）；
console.log（数组）；
document.getElementById（“联系人列表”）.innerHTML=''；
函数showContacts（）{
for（数组中的变量i）{
var id=i；
contactlist.innerHTML+=
`

名称：`+p1.fullName+`

编号：`+p1.Number+`

组：`+p1.Group+`

编辑
删除
`
}
}
showContacts（）；
功能编辑联系人（id）{
document.getElementById（“search”）.style.display='none'；
document.getElementById（“contactList”）.style.display='none'；
document.getElementById（“editcontact”）.style.display=''；
document.getElementById（“editcontact”）.innerHTML=
`
提交
`;
}

按组排序





所有联系人


应在
editContact（）
和
showContacts（）
函数中进行以下更改

function showContacts(){
    for(var i in array){
        var id = i;
        contactlist.innerHTML +=
        `
        <ul>
        <div>
        <p>Name: `+ p1.fullName +`</p>
        <p>Number: `+ p1.number +`</p>
        <p>Group: `+ p1.group +`</p>
        <button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
        <button type="button" class="btn btn-danger">Delete</button>
        </div>
        `
    }
}

showContacts();


function editContact(id) {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML = 
        `<div>
        <input type="text"  placeholder="Name here" id="nameInput2" value="`+array[id].fullName+`">
        <input type="tel" placeholder="Number here" id="numberInput2" value="`+array[id].number+`">
        <input type="text" placeholder="Group Here" id="groupInput2" value="`+array[id].group+`">
        <button type="button" class="btn btn-success">Submit</button>
        </div>`;
}

函数showContacts（）{
for（数组中的变量i）{
var id=i；
contactlist.innerHTML+=
`

名称：`+p1.fullName+`

编号：`+p1.Number+`

组：`+p1.Group+`

编辑
删除
`
}
}
showContacts（）；
功能编辑联系人（id）{
document.getElementById（“search”）.style.display='none'；
document.getElementById（“contactlist”）.style.display='none'；
document.getElementById（“editcontact”）.style.display=''；
document.getElementById（“editcontact”）.innerHTML=
`
提交
`;
}
有几件事。
您在html中输入了联系人列表（应该是联系人列表）。
在showContacts的循环中，您将id设置为索引，应该如下所示

function showContacts() {
    for (var i in array) {
        var id = array[i].number;
        document.getElementById("contactList").innerHTML +=
            '<ul><div><p>Name: ' + array[i].fullName + '</p><p>Number: ' + array[i].number + '</p><p>Group: ' + array[i].group + '</p>' +
            '<button type="button" class="btn btn-warning" onclick="editContact(' + id + ')">Edit</button>' +
            '<button type="button" class="btn btn-danger">Delete</button>' +
            '</div>';
    }
}

函数showContacts（）{
for（数组中的变量i）{
var id=数组[i]。编号；
document.getElementById（“联系人列表”）.innerHTML+=
“
名称：”+array[i]。全名+”
编号：“+array[i]。编号+”
组：“+array[i]。组+”
'+
“编辑”+
“删除”+
'';
}
}

editContact方法使用id作为索引（如前所述），这是错误的。您可以这样做（参见下面的代码）。当您单击“编辑”时，我会根据链接提供的唯一id筛选包含人员的数组

function editContact(id) {
    var obj = array.filter(function (ele) {
        console.dir(ele);
        if (ele.number === id) return ele;

    });
    console.dir(obj);
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactList").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML =
        '<div>'+
        '<input type="text"  placeholder="Name here" id="nameInput2" value="'+ obj[0].fullName + '">'+
        '<input type="tel" placeholder="Number here" id="numberInput2" value="' + obj[0].number + '">' +
        '<input type="text" placeholder="Group Here" id="groupInput2" value="' + obj[0].group + '">' +
        '<button type="button" class="btn btn-success">Submit</button>'+
       '</div>';
}

功能编辑联系人（id）{
var obj=数组.过滤器（函数（ele）{
console.dir（ele）；
if（ele.number==id）返回ele；
});
console.dir（obj）；
document.getElementById（“search”）.style.display='none'；
document.getElementById（“contactList”）.style.display='none'；
document.getElementById（“editcontact”）.style.display=''；
document.getElementById（“editcontact”）.innerHTML=
''+
''+
'' +
'' +
“提交”+
'';
}

我根据你自己做了一把最新的小提琴