Cannot Display Edit Form When Clicked On Edit Button?

I have made contact list app which displays contact details. By Default it shows 2 contact details. In index.html I have made 2 functions called showContacts() and editContact(id)

Solution 1:

A couple of things. You made a typo with your contactlist in your html (should be contactList). In your loop for showContacts you are setting id as index and should be like

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>';
    }
}

Your editContact method is using the id as an index (as previous), which is wrong. You could do something like this instead (see code below). I filter the array with people based on the unique id provided from the link when you click edit.

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>';
}

I've made a updated fiddle based on your own https://jsfiddle.net/w2hoqmts/3/

Solution 2:

Following changes should be made in editContact() and showContacts() function.

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>`;
}