document.getElementById(id) of DOM using Javascript
I have a panel style in css
#painel {
text-align: center;
position: absolute;
margin: 0 auto;
background-color: white;
width: 100%;
}
Objects that can be placed in HTML pages (implements all aspects of the DOM).
function Visualizavel(etiqueta, id) {
if (etiqueta) {
//aqui funciona perfeitamente, criando a tag table
this.visualizacao = document.createElement(etiqueta);
}
if (id) {
//pretendo obter "div.id=painel", mas não chega aqui
this.apresentar(document.getElementById(id));
}
}
function to put the view in the HTML element of the page
Visualizavel.prototype.apresentar = function (elemento) {
//Elimina, eventuais, filhos do elemento HTML da página
while (elemento.hasChildNodes()) {
elemento.removeChild(elemento.lastChild);
}
//Coloca a visualização no elemento HTML da página
if (this.visualizacao) {
elemento.appendChild(this.visualizacao);
}
};
class Panel tag table and a id painel
function Painel(id) {
//filho da classe visualizavel
Visualizavel.call(this, "table", id);
//id = painel
this.id = id;
//criar a tabela
var tbody = document.createElement("tbody");
var tr, td;
//linhas
for (var i = 0; i < 10; i++) {
tr = document.createElement("tr");
//colunas
for (var j = 0; j < 10; j++) {
td = document.createElement("td");
tr.appendChild(td);
}
tbody.appendChild(tr);
}
this.visualizacao.appendChild(tbody);
//função para carregar pagina do painel
this.carregarPainel = function() {
var div = document.createElement('div');
//mesmo que <div id="painel">Painel</div> em html
div.id = this.id;
//mesmo que <body><div id="painel">Painel</div><body> em html
document.body.appendChild(div);
};
}
Painel.prototype = Object.create(Visualizavel.prototype);
Painel.prototype.constructor = Painel;
My question is that when I create an instance of new panel
var painel = new Painel(painel);
alert("ID: "+painel.id); // irá mostrar "ID: painel"
And as being extended from classe Visualizavel , it only checks id to if and does not reach Visualizavel.prototype.apresentar tabela because id was not found
if (id) {
alert("Mesmo ID: " + id); // irá mostrar "Mesmo ID: painel"
//não chega aqui
this.apresentar(document.getElementById(id));
//porque não reconhece
// nenhum element com id=painel mas,
// tenho div.id=this.id, dentro da body
//em carregar pagina painel
}
and then when I want to call the load panel,
painel.carregarPainel();
Nothing appears