Javascript 我试图在激活时将文本更改为紫色（有效），然后在单击列表中的新选项时将其默认恢复为黑色（无效）

代码的底部是我遇到困难的地方。在匿名函数中，我的全局变量contacts返回为null

    constructor(name, last, email, pic, color){
        this.name = name;
        this.last = last;
        this.email = email;
        this.pic = pic;
        this.color = color;
    }
    updateContact(){
          var contactDiv = document.getElementById('name')
          contactDiv.innerHTML = ""
          contactDiv.innerHTML += `<h1>${this.name} ${this.last}</h1>`;
          document.getElementById('contactEmail').innerHTML = `<a href="mailto:${this.email}">${this.email}</a>`
          //removed the .png from the contact1 & contact2 so the below would work with .png 
          // i wanted the Image Drop Down to display just the dwarf's name (ex: not "bashful.png")
          document.getElementById('contactImg').src = `images/${this.pic}.png`;

    }
}

这是用户在构造函数中为新联系人输入新数据的地方

//create a function that grabs the data for the new Character
function newCharGrab(){
    var name = document.getElementById("fname").value
    var last = document.getElementById("lname").value
    var email = document.getElementById("email").value
    var imgSrc = document.getElementById("imgSrc").value
    var color = "black"
    var newContact = new Contacts(name, last, email, imgSrc, color)
    //updates the array with the new contact made
    contacts.push(newContact) 
    //this calls the display function to refresh the contact list displayed
    displayContact()
            //alert("here")
}
            console.log(contacts)
//display the name of all the contacts we currently have
// modified this because i was having issues recalling it after my newCharGrab function
// now it is called right after the initial contacts are made and then once again after activated by the click
function displayContact(){
    var strContacts = "<ul>"
    for(var i = 0; i < contacts.length; i++){
        strContacts += `<li value=${i} name="${i}"style='color:${contacts[i].color}'>${contacts[i].name} ${contacts[i].last} </li>`
        console.log(i.color)
    }
    strContacts += "</ul>"
    document.getElementById('contactList').innerHTML = strContacts
}

---

如果有人好奇，问题已经解决了<代码>document.getElementById（'contactList'）.addEventListener（'click'，函数（e）{console.log（contacts[e.target.value]）console.log（e.target.innerHTML）用于（var i=0；i添加for循环将重置默认值

//create a function that grabs the data for the new Character
function newCharGrab(){
    var name = document.getElementById("fname").value
    var last = document.getElementById("lname").value
    var email = document.getElementById("email").value
    var imgSrc = document.getElementById("imgSrc").value
    var color = "black"
    var newContact = new Contacts(name, last, email, imgSrc, color)
    //updates the array with the new contact made
    contacts.push(newContact) 
    //this calls the display function to refresh the contact list displayed
    displayContact()
            //alert("here")
}
            console.log(contacts)
//display the name of all the contacts we currently have
// modified this because i was having issues recalling it after my newCharGrab function
// now it is called right after the initial contacts are made and then once again after activated by the click
function displayContact(){
    var strContacts = "<ul>"
    for(var i = 0; i < contacts.length; i++){
        strContacts += `<li value=${i} name="${i}"style='color:${contacts[i].color}'>${contacts[i].name} ${contacts[i].last} </li>`
        console.log(i.color)
    }
    strContacts += "</ul>"
    document.getElementById('contactList').innerHTML = strContacts
}

//made with the video, this uses an anonomous function to listen for when the name
// of a contact is clicked it displays the information held in the constructor for
// that contact.
document.getElementById('contactList').addEventListener('click', function(e){
            console.log(contacts[e.target.value])
            console.log(e.target.innerHTML)

        document.getElementById('contacts').style.color = "black" //**This comes back as null**
        contacts[e.target.value].color = "purple"
        displayContact()
        contacts[e.target.value].updateContact(); 
})```