1
Hello, I’m having a hard time getting an element through the id of a Class with document.getElementById(id) of DOM using Javascript
and 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 on HTML pages (implements all aspects of 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 Place the display 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);
}
};
panel class 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 doubt is that when I create a new panel instance
var painel = new Painel(painel);
alert("ID: "+painel.id); // irá mostrar "ID: painel"
and as being extended from classe Visualizavel, only checks the id until the use of if and not enough to Visualizavel.prototype.apresentar to tabela because the 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 intend to, call the Load Panel,
painel.carregarPainel();
nothing appears