在JavaScript对象数组中存储CSS属性

Question

I am trying to store and retrieve the id and background colors of the clicked div elements of the class "square". However, when I try to print the stored value, I am getting 'undefined'.

var colorObject = [
    {
        objColor:null,
        squareId:null
    },
    {
        objColor:null,
        squareId:null
    }
];
document.getElementById("container").addEventListener("click", function(e) {
// Event delegation used to find the clicks on the squares within the "Container"
    // e.target was the clicked element
    if (e.target && e.target.matches("div.square")) {
        console.log("Square element clicked!");

        colorObject[0].objColor=this.style.backgroundColor;
        console.log(this.objColor);
        colorObject[0].squareId=this.getAttribute('id');
        console.log(this.squareId);
   }
});

Answer 1

If you re-examine what your are passing to console.log , you'll notice that it is this.objColor and this.squareId , which are not the values which you just set. Change these to colorObject[0].objColor and colorObject[0].squareId and you would have better luck I think:

colorObject[0].objColor=this.style.backgroundColor;
console.log(colorObject[0].objColor);
colorObject[0].squareId=this.getAttribute('id');
console.log(colorObject[0].squareId);

On a side note, it's a good practice to be consistent with your spacing, and careful when uploading to SO because sometimes it gets messed up a little.