setting an object orientated javascript variable with if statement

Question

I am trying to set an object orientated javascript variable using an if statement.
If the user enters a string color it will use the appropriate array.
I set the vertices array but the color array is giving me hassle.
I keep getting "undefined" on the alert box. Its my first time to attempt this and I think Im using this. wrong.

<script type="text/javascript">


    function Cube( vertexPoints, Color )
    {
        this.vertices = vertexPoints;
        if(Color == "yellow" || Color == "Yellow")
        {
            this.colorArray = [
                [1.0, 1.0, 0.0, 1.0],
                [1.0, 1.0, 0.0, 1.0],
                [1.0, 1.0, 0.0, 1.0],
                [1.0, 1.0, 0.0, 1.0],
                [1.0, 1.0, 0.0, 1.0],
                [1.0, 1.0, 0.0, 1.0]
            ];
        }
        else if(Color == "red" || Color == "Red")
        {
            this.colorArray = [
                [1.0, 0.0, 0.0, 1.0],
                [1.0, 0.0, 0.0, 1.0],
                [1.0, 0.0, 0.0, 1.0],
                [1.0, 0.0, 0.0, 1.0],
                [1.0, 0.0, 0.0, 1.0],
                [1.0, 0.0, 0.0, 1.0]
            ];
        }
        else if(Color == "green" || Color == "Green")
        {
            this.colorArray = [
                [0.0, 0.0, 0.0, 1.0],
                [0.0, 0.0, 0.0, 1.0],
                [0.0, 0.0, 0.0, 1.0],
                [0.0, 0.0, 0.0, 1.0],
                [0.0, 0.0, 0.0, 1.0],
                [0.0, 0.0, 0.0, 1.0]
            ];
        }
        else if(Color == "pink" || Color == "Pink")
        {
            this.colorArray = [
                [1.0, 0.5, 0.5, 1.0],
                [1.0, 0.5, 0.5, 1.0],
                [1.0, 0.5, 0.5, 1.0],
                [1.0, 0.5, 0.5, 1.0],
                [1.0, 0.5, 0.5, 1.0],
                [1.0, 0.5, 0.5, 1.0]
            ];
        }
        else if(Color == "purple" || Color == "Purple")
        {
            this.colorArray = [
                [1.0, 0.0, 1.0, 1.0],
                [1.0, 0.0, 1.0, 1.0],
                [1.0, 0.0, 1.0, 1.0],
                [1.0, 0.0, 1.0, 1.0],
                [1.0, 0.0, 1.0, 1.0],
                [1.0, 0.0, 1.0, 1.0]
            ];
        }
        else if(Color == "blue" || Color == "Blue")
        {
            this.colorArray = [
                [0.0, 0.0, 1.0, 1.0],
                [0.0, 0.0, 1.0, 1.0],
                [0.0, 0.0, 1.0, 1.0],
                [0.0, 0.0, 1.0, 1.0],
                [0.0, 0.0, 1.0, 1.0],
                [0.0, 0.0, 1.0, 1.0]
            ];
        }
        else 
        {
         this.colorArray = [
                [0.0, 0.0, 0.0, 0.0],
                [0.0, 0.0, 0.0, 0.0],
                [0.0, 0.0, 0.0, 0.0],
                [0.0, 0.0, 0.0, 0.0],
                [0.0, 0.0, 0.0, 0.0],
                [0.0, 0.0, 0.0, 0.0]
         ]
        }
    }


    function hi()
    {
        alert("Hi my vertices is "+Cube.vertices);
        alert("Hi my vertices is "+Cube.colorArray);
    }

    function set()
    {
        Cube.vertices = [
            // Front face
            -1.0, -1.0,  1.0,
             1.0, -1.0,  1.0,
             1.0,  1.0,  1.0,
            -1.0,  1.0,  1.0,

            // Back face
            -1.0, -1.0, -1.0,
            -1.0,  1.0, -1.0,
             1.0,  1.0, -1.0,
             1.0, -1.0, -1.0,

            // Top face
            -1.0,  1.0, -1.0,
            -1.0,  1.0,  1.0,
             1.0,  1.0,  1.0,
             1.0,  1.0, -1.0,

            // Bottom face
            -1.0, -1.0, -1.0,
             1.0, -1.0, -1.0,
             1.0, -1.0,  1.0,
            -1.0, -1.0,  1.0,

            // Right face
             1.0, -1.0, -1.0,
             1.0,  1.0, -1.0,
             1.0,  1.0,  1.0,
             1.0, -1.0,  1.0,

            // Left face
            -1.0, -1.0, -1.0,
            -1.0, -1.0,  1.0,
            -1.0,  1.0,  1.0,
            -1.0,  1.0, -1.0
        ];

        Cube.Color = "yellow";
    }
</script>
<body>
<button type="button" onclick="set();">Set the properties</button>
<button type="button" onclick="hi();">Push me</button>
</body>
</head>
</html>

Any help would be greatly appreciated.

Ryan Wheale · Accepted Answer · 2014-11-17 23:46:36Z

1

There are several issues with your code and some improvements you can make.

Your Cube object represents what can be thought of as a class in other languages. Your class has some properties. You need to create a helper (setter) method to set the color matrix you want. Also, you can minimize a lot of your code by using a switch:

function Cube(vertices, color) {
    this.vertices = vertices;
    this.setColor(color);
}

Cube.prototype.setColor = function(color) {
    switch (color.toLowerCase()) {
        case "yellow":
            this.colorArray = [];
            break;

        case "red":
            this.colorArray = [];
            break;

        case "purple":
            this.colorArray = [];
            break;

        [...]
    }
}

// create a new instance of your Cube class
var cubeInstance = new Cube([0, 1, 0 ...], "yellow");

// then change the color to red
cubeInstance.setColor("red");

answered Nov 17, 2014 at 23:46

Ryan Wheale

28.7k11 gold badges87 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dennington-bear Over a year ago

This is what I was trying to do.I have used classes in C++ and this explains exactly what I was attempting. Thank you

Ryan Wheale Over a year ago

This is the quick and dirty way. The best way to achieve inheritance and so forth is to use Object.create - read about it here

Lochemage · Accepted Answer · 2014-11-17 23:36:59Z

1

function hi()
{
    alert("Hi my vertices is "+Cube.vertices);
    alert("Hi my vertices is "+Cube.colorArray);
}

What is Cube, isn't that the class name, rather than the instance of the object?

The same goes for your set() function.

If you want to access the actual instance of the Cube you are in, then store it in another variable so you can use it later:

var self = this;
function hi()
{
    alert("Hi my vertices is "+self.vertices);
    alert("Hi my vertices is "+self.colorArray);
}

answered Nov 17, 2014 at 23:36

Lochemage

3,97413 silver badges11 bronze badges

1 Comment

Dennington-bear Over a year ago

ya that did it i messed up as you said with the Cube.vertices. So I made a var x = new Cube(vertices,color); thanks

tomasb · Accepted Answer · 2014-11-17 23:42:16Z

There are several approaches possible. One can be as follows:

<script type="text/javascript">


    function Cube( vertexPoints, Color )
    {
        this.vertices = vertexPoints;
        if(Color == "yellow" || Color == "Yellow")
        {
            this.colorArray = [
                [1.0, 1.0, 0.0, 1.0],
                [1.0, 1.0, 0.0, 1.0],
                [1.0, 1.0, 0.0, 1.0],
                [1.0, 1.0, 0.0, 1.0],
                [1.0, 1.0, 0.0, 1.0],
                [1.0, 1.0, 0.0, 1.0]
            ];
        }
        else if(Color == "red" || Color == "Red")
        {
            this.colorArray = [
                [1.0, 0.0, 0.0, 1.0],
                [1.0, 0.0, 0.0, 1.0],
                [1.0, 0.0, 0.0, 1.0],
                [1.0, 0.0, 0.0, 1.0],
                [1.0, 0.0, 0.0, 1.0],
                [1.0, 0.0, 0.0, 1.0]
            ];
        }
        else if(Color == "green" || Color == "Green")
        {
            this.colorArray = [
                [0.0, 0.0, 0.0, 1.0],
                [0.0, 0.0, 0.0, 1.0],
                [0.0, 0.0, 0.0, 1.0],
                [0.0, 0.0, 0.0, 1.0],
                [0.0, 0.0, 0.0, 1.0],
                [0.0, 0.0, 0.0, 1.0]
            ];
        }
        else if(Color == "pink" || Color == "Pink")
        {
            this.colorArray = [
                [1.0, 0.5, 0.5, 1.0],
                [1.0, 0.5, 0.5, 1.0],
                [1.0, 0.5, 0.5, 1.0],
                [1.0, 0.5, 0.5, 1.0],
                [1.0, 0.5, 0.5, 1.0],
                [1.0, 0.5, 0.5, 1.0]
            ];
        }
        else if(Color == "purple" || Color == "Purple")
        {
            this.colorArray = [
                [1.0, 0.0, 1.0, 1.0],
                [1.0, 0.0, 1.0, 1.0],
                [1.0, 0.0, 1.0, 1.0],
                [1.0, 0.0, 1.0, 1.0],
                [1.0, 0.0, 1.0, 1.0],
                [1.0, 0.0, 1.0, 1.0]
            ];
        }
        else if(Color == "blue" || Color == "Blue")
        {
            this.colorArray = [
                [0.0, 0.0, 1.0, 1.0],
                [0.0, 0.0, 1.0, 1.0],
                [0.0, 0.0, 1.0, 1.0],
                [0.0, 0.0, 1.0, 1.0],
                [0.0, 0.0, 1.0, 1.0],
                [0.0, 0.0, 1.0, 1.0]
            ];
        }
        else 
        {
         this.colorArray = [
                [0.0, 0.0, 0.0, 0.0],
                [0.0, 0.0, 0.0, 0.0],
                [0.0, 0.0, 0.0, 0.0],
                [0.0, 0.0, 0.0, 0.0],
                [0.0, 0.0, 0.0, 0.0],
                [0.0, 0.0, 0.0, 0.0]
         ]
        }
    }

    var cube = new Cube(); // can use parameters here, define object cube


    function hi(cube)
    {
        alert("Hi my vertices is "+cube.vertices);
        alert("Hi my vertices is "+cube.colorArray);
    }

    function set(cube)
    {
        cube.vertices = [
            // Front face
            -1.0, -1.0,  1.0,
             1.0, -1.0,  1.0,
             1.0,  1.0,  1.0,
            -1.0,  1.0,  1.0,

            // Back face
            -1.0, -1.0, -1.0,
            -1.0,  1.0, -1.0,
             1.0,  1.0, -1.0,
             1.0, -1.0, -1.0,

            // Top face
            -1.0,  1.0, -1.0,
            -1.0,  1.0,  1.0,
             1.0,  1.0,  1.0,
             1.0,  1.0, -1.0,

            // Bottom face
            -1.0, -1.0, -1.0,
             1.0, -1.0, -1.0,
             1.0, -1.0,  1.0,
            -1.0, -1.0,  1.0,

            // Right face
             1.0, -1.0, -1.0,
             1.0,  1.0, -1.0,
             1.0,  1.0,  1.0,
             1.0, -1.0,  1.0,

            // Left face
            -1.0, -1.0, -1.0,
            -1.0, -1.0,  1.0,
            -1.0,  1.0,  1.0,
            -1.0,  1.0, -1.0
        ];

        cube.Color = "yellow";

    }
</script>
<body>
<button type="button" onclick="set(cube);">Set the properties</button>
<button type="button" onclick="hi(cube);">Push me</button>
</body>
</head>
</html>

other can be:

Cube.prototype.set = function (v, c) { this.vertices = v; this.color = c } //call cube.set(v,c);

Collectives™ on Stack Overflow

setting an object orientated javascript variable with if statement

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related