O que não deixa o seu código correr é mesmo um erro de escrita em:
var chaves = object.keys(this);
// ^---- Deveria ser Object
Mas curiosamente você não esta a usar a variavel chaves
no código que segue por isso acaba por ter o mesmo efeito que retirar a instrução. Pois está a iterar nas propriedades com:
for (property in this) {
É bastante aconselhável que coloque o var
no for
, ficando for (var property in this)
, e também não dava para usar Object.keys
aqui, pois esse passa pelas propriedades do próprio objeto e que são enumeráveis.
Para que cada vez que escolhe um novo objeto não acumule as novas propriedades com as anteriores, tem de as limpar antes de colocar novas. Pode fazer isso simplesmente com:
select.innerHTML = "";
Veja o seu código a funcionar com essas pequenas alterações:
function criarElemento(tag) {
var elemento = document.createElement(tag);
elemento.innerText = "teste";
elemento.addEventListener("click", obterAtributosDosElementos);
document.getElementById("secElementos").appendChild(elemento);
}
function obterAtributosDosElementos() {
var select = document.getElementById("slcDadosElemento");
select.innerHTML = ""; //limpar as opções anteriores
//var chaves = Object.keys(this); //sem esta que não estava a ser utilizada
for (var property in this) { //com var
var opcao = document.createElement("option");
opcao.value = property;
opcao.innerText = property;
select.appendChild(opcao);
}
}
section article {
display: inline-block;
width: 45%;
height: 100px;
}
header,nav,section,article,footer {
border: 1px solid gray;
margin: 4px;
padding: 4px;
}
#navMenu>a:first-child {
border-left: 1px solid black;
}
#navMenu a {
border-right: 1px solid black;
}
<meta charset="UTF-8">
<title>Teste</title>
<nav id="navMenu">
<a href="#">Pagina</a>
<a href="#">Pagina</a>
</nav>
<section>
<h2>Criador de Elementos</h2>
<article>
<h3>Elementos</h3>
<button value="p" onclick="criarElemento(this.value)">p</button>
<button value="button" onclick="criarElemento(this.value)">Botão</button>
<button value="div" onclick="criarElemento(this.value)">div</button>
</article>
<article>
<h3>Edição de Atributos</h3>
<p>Elemento: </p>
<select id="slcDadosElemento"></select>
</article>
</section>
<section id="secElementos">
z
</section>
<footer>
<p>Aula Teste</p>
</footer>
Obs: Tem outro erro de escrita no seu css
#navMenu a {
bolder-right: 1px solid black;
/* ^---aqui */
Que tem bolder
em vez de border
. Consegui ver facilmente pois a sintaxe não ficou colorida da mesma forma que as restantes regras de CSS aqui no snippet do StackOverflow.