TypeError: string is not a function

Question

In the following code, TypeError: string is not a function on line 30 var myColour = new colour(255,255,255); is thrown. Can anyone see what is wrong with the code. Many thanks.

var bodies = [];
var orbits = [];
var colours = [
    new colour(45, 45, 45),
    new colour(255, 0, 0),
    new colour(0, 157, 255),
    new colour(77, 250, 81),
    new colour(255, 247, 0)
];

function colour(red, green, blue)
{
    this.red = red;
    this.green = green;
    this.blue = blue;
};

window.onload = function() {
    var c = document.getElementById("theCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
    for (var colour in colours){
        console.log(colour.red);
        console.log(colour.green);
        console.log(colour.blue);
    };
    var myColour = new colour(255,255,255);
    console.log(myColour.red);
    console.log(myColour.green);
    console.log(myColour.blue);
};

Some Guy · Accepted Answer · 2012-12-29 12:36:21Z

6

You have a local variable called colour in the for...in loop, and that is not a function. Change that variable to something other than the constructor function, like c and it'll work fine. Your code, corrected:

var bodies = [];
var orbits = [];
var colours = [
    new colour(45, 45, 45),
    new colour(255, 0, 0),
    new colour(0, 157, 255),
    new colour(77, 250, 81),
    new colour(255, 247, 0)
];

function colour(red, green, blue)
{
    this.red = red;
    this.green = green;
    this.blue = blue;
};

window.onload = function() {
    var c = document.getElementById("theCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
    for (var c in colours){
        console.log(c.red);
        console.log(c.green);
        console.log(c.blue);
    };
    var myColour = new colour(255,255,255);
    console.log(myColour.red);
    console.log(myColour.green);
    console.log(myColour.blue);
};

Demo

answered Dec 29, 2012 at 12:36

Some Guy

16.2k10 gold badges61 silver badges68 bronze badges

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

3 Comments

Nate Over a year ago

Thanks, that worked great. Though I have noticed another problem. I get 'undifined' values when looping through the colours array. Any ideas why? Thanks again.

Some Guy Over a year ago

@Nate Pretty sure that it's because you're using a for...in loop. Use an ordinary for loop or a forEach on the array, and it works fine. I've used a forEach here

Nate Over a year ago

You are spot on. Also changing c.red to colours[c].red worked. Cheers

Hui Zheng · Accepted Answer · 2012-12-29 12:44:43Z

3

Local variable colour defined in for (var colour in colours) will be hoisted to the beginning of the onload function, so it will hide the global function colour. Changing the latter to Colour will solve your problem. Besides, it's good convention to capitalize the name of a function which serves as a Class name.

answered Dec 29, 2012 at 12:44

Hui Zheng

10.2k2 gold badges37 silver badges40 bronze badges

1 Comment

Nate Over a year ago

Thank you. Good tip on capitalising the name of a 'class' function

Collectives™ on Stack Overflow

TypeError: string is not a function

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related