1

Estou com dificuldades no bloco que deveria listar os elementos criados pelo function obterAtributosDosElementos, era pra listar ao lado as strings, mas no fim não lista.

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

Site Dinâmico

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

1
  • Não é só tirar a linha var chaves = object.keys(this);? Commented 3/06/2018 às 13:37

1 Resposta 1

1

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

1
  • Nossa, passei duas horas e não consegui observar isso. vou trocar o teclado, pois tem travado algumas teclas. Uso o Notepad++, mas vou usar além dele,mais outro. Commented 3/06/2018 às 21:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .