CODEWITHSUNDEEP
javascriptarraysfunctioninheritancefunction-calls
Kryštof Řeháček
Kryštof Řeháček

Reputation: 2483

Inheritance / Calling function from object in array

Hello!

I am rather new to Javascript. I am better in Java so I get confused in many things about Javascript. I've created class Clovek witch has some variables and functions. Later I've created array Lide witch has MAX (100) objects of Clovek in it. So when I called later to call function vypis I got only TypeError .. blah blah is not a function. But when i wrote ** console.trace(lide[1])** for example it wrote that is an instance of Clovek. I am confused..

Code here:

function makeid() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

    for( var i=0; i < 8; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

var odstavec = document.getElementById("test");

function Clovek(vek, pohlavi, jmeno) {
    this.vek = vek;
    this.pohlavi = pohlavi;
    this.jmeno = jmeno;
}

Clovek.prototype.vypis = function() {
    //console.log(this.vek+" "+this.pohlavi+" "+this.jmeno);
    //odstavec.innerHTML = this.vek+" "+this.pohlavi+" "+this.jmeno;
    return this.vek+" "+this.pohlavi+" "+this.jmeno;
};


var MAX = 100; // Maximální počet 

var lide = [MAX];

for( var i = 0; i < MAX; i++) {
    _tempclovek = new Clovek(i,"muz",makeid());
    lide.push(_tempclovek);
    console.log(_tempclovek.vypis());
};

var table = document.createElement("table");
var tbody = document.createElement("tbody");

for (var i = 0; i < MAX; i++) {
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    _tempclovek = lide[i];
    console.trace(_tempclovek.vypis());
    var cellText = document.createTextNode(_tempclovek); 

    cell.appendChild(cellText);
    row.appendChild(cell);
    tbody.appendChild(row);
};


var body = document.getElementsByTagName("body")[0];
table.appendChild(tbody);
body.appendChild(table);
table.setAttribute("border", "2");

EDIT - That code lies inside HTML document im <script> tag

Upvotes: 0

Views: 49

Answers (3)

csum
csum

Reputation: 1992

1. Array definiton
Use var lide = []; instead of var lide = [MAX];. Javascript does not give a native way to limit the number of elements in an array. [MAX] just gives you an array with one element in it: the number MAX, or 100 in this case.

2. Variable scope
In your for loops, use the keyword var when defining the variable _tempclovek so that it uses _tempclovek in local scope rather than global scope. If you don't use var when defining a variable in js, it creates a global variable, which can lead to unexpected results.

3. Objects as strings
Your call to createTextNode() should be calling the vypis() function on your Clovek object. Otherwise you will get the default string value for your object, which is [object Object] in js.

http://jsfiddle.net/pcbpa9p5/

Upvotes: 1

Rajesh
Rajesh

Reputation: 24915

You can create an array with length using new Array(MAX). This will create an array of 100 null values. If you use push, it will append it to array, so use lide[i] instead.

Code

function makeid() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

    for (var i = 0; i < 8; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

var odstavec = document.getElementById("test");

function Clovek(vek, pohlavi, jmeno) {
    this.vek = vek;
    this.pohlavi = pohlavi;
    this.jmeno = jmeno;
}

Clovek.prototype.vypis = function () {
    //console.log(this.vek+" "+this.pohlavi+" "+this.jmeno);
    //odstavec.innerHTML = this.vek+" "+this.pohlavi+" "+this.jmeno;
    return this.vek + " " + this.pohlavi + " " + this.jmeno;
};

var MAX = 100; // Maximální počet 
var lide = new Array(MAX);

for (var i = 0; i < MAX; i++) {
    var _tempclovek = new Clovek(i, "muz", makeid());
    lide[i] = _tempclovek;
    //console.log(_tempclovek.vypis());
};


var table = document.createElement("table");
var tbody = document.createElement("tbody");

for (var i = 0; i < MAX; i++) {
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    var _tempclovek = lide[i];
    console.log("Type Of: " ,typeof(lide[i]))
    console.log(lide)
    console.trace(_tempclovek.vypis());
    var cellText = document.createTextNode(_tempclovek.vypis()); 

    cell.appendChild(cellText);
    row.appendChild(cell);
    tbody.appendChild(row);
};


var body = document.getElementsByTagName("body")[0];
table.appendChild(tbody);
body.appendChild(table);
table.setAttribute("border", "2");

Upvotes: 1

mooiamaduck
mooiamaduck

Reputation: 2156

You are looping over lide starting at element 0, which is the integer 100 and not an instance of Clovek.

Upvotes: 1

Related Questions