如何访问对象属性数组？

Question

i'm working in a simple program that uses an HTML Form to fill an Array with some information, so far, i can get the input data, store it into my list, and visualize it like this :

It basically, converts the Name to a Link, when you click it, it will create a <div> in which i show all the information of the contact.

And i've done this like this :

The error i'm getting is in the last 6 lines of Code.

(I'm trying to avoid all non-troubling code)

var list = [];
var ulList = document.createElement("UL");

function AddToList(){
    //Just pushes the info into the list.
}

function Visualize(){
    ClearScreen();
    for(var i = 0 ; i < list.length ; i++){
        //Tried to keep it clean, this just works with each item in the list.
        AddToList(i);    
    }      
}

//This Works correctly, it shows every Name i've previously pushed into the list like a Link.
function AddToList(index){
    var element = document.createElement("LI");
    var name = document.createTextNode(list[index].name);
    element.appendChild(name);

    var link = document.createElement("A");
    link.setAttribute("HREF", "#");
    link.appendChild(element);
    lik.setAttribute("ID", index);            
    link.addEventListener("click", ShowInfo(this.id)); //Index would do the same

    ulList.appendChild(link);           
    document.getElementsByTagName("body")[0].appendChild(ulList);    
}

//Trouble comes here
function ShowInfo(index){
    CleanDIV();

    //Previously created <div> with box as id    
    var box = document.getElementById("box");
    var details = document.createElement("UL");
    var lName = document.createElement("LI");
    var lNumber = document.createElement("LI");
    var lMail = document.createElement("LI");


    //
    //The error is here : Cannot Read Property 'name' of undefined
    //And i dont know why, since i've done something similar in a previous line...
    //    
    lName.appendChild(document.createTextNode("Name :" + list[index].name));
    lNumber.appendChild(document.createTextNode("Number : " + list[index].number));
    lMail.appendChild(document.createTextNode("Mail : " + list[index].mail));

    details.appendChild(lName);
    details.appendChild(lNumber);
    detaisl.appendChild(lMail);
}

I dont even know what kind of mistake i'm making, and was not sure of how to ask this question.

I apologyze for any grammar mistake, my bad variable naming abilities and any lack of quality in my question.

Thank you kindly.

Answer 1

在您的AddToList函数中，索引是“未定义的”

Answer 2

You get the error because you have not added anything to your list array. Add the person details to the list array when the Add to List button is clicked. And retrieve this when the link is clicked.

var name = document.getElementById("txtName").value;
var number = document.getElementById("txtNnumber").value;
...
var person = {'name': name, 'number': number};
list.push(person);

Answer 3

Looks like you have a couple of typos in your code.

lik.setAttribute("ID", indice);            
link.addEventListener("click", ShowInfo(this.id)); //Index would do the same

should be

link.setAttribute("ID", index);            
link.addEventListener("click", ShowInfo(index)); //Index would do the same