Javascript does not list elements

Question

I’m having difficulties in the block that should list the elements created by Function get TributesDosElements, it was to list next to the strings, but at the end no list.

<style>

    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 { 
        bolder-right: 1px solid black;
        }
</style>


<meta charset="UTF-8">
<title>Teste</title>

Dynamic Site

    </header>

    <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>           

    <script>

        function criarElemento(tag) {
            var elemento = document.createElement(tag);
            elemento.innerText = "teste";
            //elemento.onclick = obterAtributosDosElementos;
            elemento.addEventListener("click", obterAtributosDosElementos);
            document.getElementById("secElementos").appendChild(elemento);
        }

        function obterAtributosDosElementos() {
            var select = document.getElementById("slcDadosElemento");
            var chaves = object.keys(this);


        for (property in this) {
    var opcao = document.createElement("option");
    opcao.value = property;
    opcao.innerText = property;
    select.appendChild(opcao);
}

        }

    </script>

Answer 1

What doesn’t let your code run is even a typo in:

var chaves = object.keys(this);
//           ^---- Deveria ser Object

But interestingly you’re not using the variable chaves in the code that follows so it ends up having the same effect as removing the instruction. For it is iterating in properties with:

for (property in this) {

It is advisable to put the var in the for, getting for (var property in this), and you couldn’t use it either Object.keys here, because this goes through the properties of the object itself and that are enumerable.

So that each time you choose a new object does not accumulate the new properties with the previous ones, you have to clean them before you put new ones. You can do it simply with:

select.innerHTML = "";

See your code working with these small changes:

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>

Note: There is another error writing in your css

#navMenu a { 
    bolder-right: 1px solid black;
/*    ^---aqui */

That has bolder instead of border. I could easily see because the syntax was not colored in the same way as the other CSS rules here in the Stackoverflow snippet. I advise you to use an editor that can visually show you these types of errors, and thus facilitate development.