Javascript 无法设置/读取未定义的属性

我正在尝试制作一个“站点布局”类型的东西，在这里，你点击一个属性和一个值，面板就会变成那个东西。我需要能够有一个接口数组，我可以点击通过

我收到错误

无法设置/读取未定义的属性颜色

这是我的代码：

---

这是导致问题的HTML：

<table style = "width:90px;">
            <tr>
                <td class = 'colors' style = "background-color:red;" onclick = "interfaces[idx].colors = 'red'; changeColor();"></td>
                <td class = 'colors' style = "background-color:orange;" onclick = "interfaces[idx].colors = 'orange'; changeColor();"></td>
                <td class = 'colors' style = "background-color:yellow;" onclick = "interfaces[idx].colors = 'yellow'; changeColor();"></td>
            </tr>
            <tr>
                <td class = 'colors' style = "background-color:green;" onclick = "interfaces[idx].colors = 'green'; changeColor();"></td>
                <td class = 'colors' style = "background-color:blue;" onclick = "interfaces[idx].colors = 'blue'; changeColor();"></td>
                <td class = 'colors' style = "background-color:purple;" onclick = "interfaces[idx].colors = 'purple'; changeColor();"></td>
            </tr>
            <tr>
                <td class = 'colors' style = "background-color:lightpink;" onclick = "interfaces[idx].colors = 'lightpink '; changeColor();"></td>
                <td class = 'colors' style = "background-color:thistle;" onclick = "interfaces[idx].colors = 'thistle'; changeColor();"></td>
                <td class = 'colors' style = "background-color:black;" onclick = "interfaces[idx].colors = 'black'; changeColor();"></td>
            </tr>
        </table>

---

调用“

var interfaces=new Array（）

”两次。如果你把它取出来，你应该没事。

在你已经把一个

新接口（）推到它上面之后，你重新声明了
接口
，这样就把它清除了<代码>变量接口=新数组（）interfaces[idx]

时，

interfaces

是一个空数组。

<table style = "width:90px;">
            <tr>
                <td class = 'colors' style = "background-color:red;" onclick = "interfaces[idx].colors = 'red'; changeColor();"></td>
                <td class = 'colors' style = "background-color:orange;" onclick = "interfaces[idx].colors = 'orange'; changeColor();"></td>
                <td class = 'colors' style = "background-color:yellow;" onclick = "interfaces[idx].colors = 'yellow'; changeColor();"></td>
            </tr>
            <tr>
                <td class = 'colors' style = "background-color:green;" onclick = "interfaces[idx].colors = 'green'; changeColor();"></td>
                <td class = 'colors' style = "background-color:blue;" onclick = "interfaces[idx].colors = 'blue'; changeColor();"></td>
                <td class = 'colors' style = "background-color:purple;" onclick = "interfaces[idx].colors = 'purple'; changeColor();"></td>
            </tr>
            <tr>
                <td class = 'colors' style = "background-color:lightpink;" onclick = "interfaces[idx].colors = 'lightpink '; changeColor();"></td>
                <td class = 'colors' style = "background-color:thistle;" onclick = "interfaces[idx].colors = 'thistle'; changeColor();"></td>
                <td class = 'colors' style = "background-color:black;" onclick = "interfaces[idx].colors = 'black'; changeColor();"></td>
            </tr>
        </table>