My JavaScript code with objects and methods isn't working

Question

I'm on JavaScript right now and a few days passed since I studied objects so I decided to try and make my own ones. The problem is that my code isn't really working. It prints me only the first objects. I'm sure that I will get good answers here because this place helped me a lot when I studied and experimented with HTML5 and CSS. Thanks a lot!

var person_1st = {
  name: "Plamen",
  surname: "Dobrev",
  age: "14",
  favourite_colour: "blue"
};

document.write(person_1st.name + "<br />" + person_1st.surname + "<br />" + person_1st.age + "<br />" + person_1st.favourite_colour);



function person_2nd(name, surname, age, favourite_colour) {
  this.name = name;
  this.surname = surname;
  this.age = age;
  this.favourite_colour = favourite_colour;
  this.new_favourite_colour = function(favourite_colour) {
    this.favourite_color = favourite_colour;
  };
};

var person_2nd_Plamen = new person_2nd("Plamen", "Dobrev", 14, "blue");
person_2nd_Plamen.new_favourite_color("red");
document.write(person_2nd_Plamen.name + "<br />" + person_2nd_Plamen.surname + "<br />" + person_2nd_Plamen.age + "<br />" + person_2nd_Plamen.favourite_colour);




function person_3rd(name, surname, age, favourite_colour) {
  this.name = name;
  this.surname = surname;
  this.age = function(age) {
    this.age = age;
  };
  this.favourite_colour = favourite_colour;
};

var person_3rd_Plamen = new person_3rd("Plamen", "Dobrev", 14, "blue");
person_3rd_Plamen.age(15);
document.write(person_3rd_Plamen.name + "<br />" + person_3rd_Plamen.surname + "<br />" + person_3rd_Plamen.age + "<br />" + person_3rd_Plamen.favourite_colour);



function person_4th(name, surname, age, favourite_colour) {
  this.name = name;
  this.surname = surname;
  this.age = new_age;
  this.favourite_colour = favourite_colour;
};

function new_age() {
  return 15;
};

var person_4th_Plamen = new person_4th("Plamen", "Dobrev", 14, "blue");
document.write(person_4th_Plamen.name + "<br />" + person_4th_Plamen.surname + "<br />" + person_4th_Plamen.age + "<br />" + person_4th_Plamen.favourite_colour);

Answer 1

Plamen. Glad you're taking an interest in web development and JavaScript, hope you learn a lot.

As pointed out by a few members you mis-spelled the word `color - hit F12 on your browser to open the console and you'll get useful hints when there's an error. You can also write data directly to the console from your JavaScript code:

console.log("Hi, Plamen!");

There's some really cool things we can do in JavaScript, your code is great but we could tidy it up and make it cooler. The great thing about our object function is that we really only need to have one of them. We can use it to create multiple instances of the object, you could have a single person function, like this:

function person(name, surname, age, favourite_color) {
    this.name = name;
    this.surname = surname;
    this.age = age;
    this.favourite_color = favourite_color;
}

And use it to create lot's of people, every person you create from this object function will inherit the properties and methods of the object function.

person_1 = new person("My name", "My surname", 38, "blue");
person_2 = new person("Your name", "Your surname", 123, "magenta");
person_3 = new person("Someone", "else", 4321, "purple");

document.write("Person 1 name: " + person_1.name + " " + person_1.surname);
document.write("Person 2 name: " + person_2.name + " " + person_2.surname);
document.write("Person 3 name: " + person_3.name + " " + person_3.surname);

// Or, view output in console

console.log("Person 1 name: " + person_1.name + " " + person_1.surname);
console.log("Person 2 name: " + person_2.name + " " + person_2.surname);
console.log("Person 3 name: " + person_3.name + " " + person_3.surname);

Think of the function as a sort of template that can be used to create many instances of the object. Your instances can inherit methods as well as properties:

function person(name, surname, age, favourite_color) {
    this.name = name;
    this.surname = surname;
    this.age = age;
    this.favourite_color = favourite_color;

    this.changeFavouriteColor = function(color) {
        this.favourite_color = color;
    };

    this.changeAge = function(age) {
        this.age = age;
    };
};

person_1 = new person("me", "misturr", 20, "orange");
person_2 = new person("him", "surrr", 50, "yellow");

person_1.changeAge(21);
person_2.changeFavouriteColor("green");

console.log(`${person_1.name} is ${person_1.age} years old`);
console.log(`${person_2.name}'s favourite color is ${person_2.favourite_color}`);

JavaScript is pretty cool, hope you have fun and learn more.

Answer 2

It's great that you're interested in learning Javascript! As @aug mentioned in the comments, the browser-console is a great tool to figure out whats going wrong. In this case you are getting a type error: Uncaught TypeError: person_2nd_Plamen.new_favourite_color is not a function

In this case you had spelled color differently in different places. Some times you spelled it color but other times colour.

function person_2nd(name, surname, age, favourite_colour) {
  this.name = name;
  this.surname = surname;
  this.age = age;
  this.favourite_colour = favourite_colour;
  this.new_favourite_colour = function(favourite_colour) {
    this.favourite_colour = favourite_colour;
  }
};

var person_2nd_Plamen = new person_2nd("Plamen", "Dobrev", 14, "blue");
person_2nd_Plamen.new_favourite_colour("red");
document.write(
  person_2nd_Plamen.name + "<br />" + 
  person_2nd_Plamen.surname + "<br />" + 
  person_2nd_Plamen.age + "<br />" + 
  person_2nd_Plamen.favourite_colour
);
console.log(person_2nd_Plamen);

Answer 3

Try something like this for understanding:

function Person() {
  this.name;
  this.surname;
  this.age;
  this.favourite_colour;
  this.assign = function(n, s, a, fc) {
    this.name = n;
    this.surname = s;
    this.age = a;
    this.favourite_colour = fc;
  }
}
var p = new Person(); // create object
p.assign("Plamen", "Dobrev", "18", "blue")
alert(p.name);

var p = [];
p.push(new Person());
p[0].assign("Plamen", "Dobrev", "18", "blue"); // first index
alert(p[0].age); // get age of first index for example