Untitled

Cannot set/ read property of undefined

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();

}

       

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