Skip to main content
adicionou 124 caracteres ao conteúdo
Fonte Link
Isac
  • 25,5mil
  • 3
  • 31
  • 51

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. Aconselho a utilizar um editor que lhe consiga visualmente mostrar esse tipo de erros, e facilitar assim o desenvolvimento.

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.

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. Aconselho a utilizar um editor que lhe consiga visualmente mostrar esse tipo de erros, e facilitar assim o desenvolvimento.

Fonte Link
Isac
  • 25,5mil
  • 3
  • 31
  • 51

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.