CODEWITHSUNDEEP
javascriptcssstyleselement
SemicolonExpected
SemicolonExpected

Reputation: 614

Cannot set/ read property of undefined

I'm trying to make an 'site layout' type thing where you click on an attribute and a value and the panel changes to that thing. I need to be able to have an array of interfaces that I can click through.

I'm getting the error cannot set/read property colors of undefined

This is my code:

var panel = "";
var colorType = "texts";
var interfaces = new Array();
interfaces.push(new Interface());
var colors = 'black'
var idx = 0;

var interfaces = new Array();

function Interface(c)
{
    this.colors = c;
}
function changeColor()
{
    if(panel != '')
    {
        if(colorType == 'texts')
        {
            document.getElementById(panel).style.color = interfaces[idx].colors;
        }
        if(colorType == 'background')
        {
            document.getElementById(panel).style.backgroundColor = interfaces[idx].colors;
        }
    }
}
function changeSize()
{
    document.getElementById(panel).style.fontSize = interfaces[idx].getElementById('fsizes').value +'px';
}
function panelClicked()
{
    document.getElementById('texts').style.borderStyle = 'solid'; 
    document.getElementById('background').style.borderStyle = 'none'; 
    colors = 'black'; 
    colorType = 'texts';
    changeColor();
}

This is the HTML thats causing trouble:

<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>

Upvotes: 0

Views: 2265

Answers (1)

Thomas Thorogood
Thomas Thorogood

Reputation: 2357

You call "var interfaces = new Array()" twice. If you take that out, you should be okay.

Upvotes: 2

Related Questions