JavaScript does not list elements

Question

JavaScript does not list elements

Navigation

#1 by (1 votes)

1

I'm having problems in the block that should list the elements created by the function getAtributesElements, it was to list the strings next, but in the end it does not 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>

html elementos

asked by anonymous 03.06.2018 / 14:57

1 answer

Do not allow entering a € symbol in an input Show information in activity androd studio

score 1 · Accepted Answer

What does not let your code run is really a writing error at:

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

But interestingly you are not using the variable chaves in the code that follows so it ends up having the same effect as removing the statement. Because it is iterating in properties with:

for (property in this) {

It is highly recommended that you put var in for , getting for (var property in this) , and also could not use Object.keys here, since it passes through the properties of the object itself and that are enumerable.

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

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 typo in your css

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

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