Error in Javascript when selecting the button in another tag

Asked

Viewed 16 times

0

Every time I press the Button to create inside the id="secElements" it should create a button, but it doesn’t, I’ve already reviewed the code several times and I can’t find the error

<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 (var i = 0; i < chaves.length; i++) {
                var opcao = document.createElemente("option");
                opcao.value = chaves[i];
                opcao.innerText = chaves[i];
                select.appendChild(opcao);
            }

        }

    </script>

javascript html website

  • Italo, try to solve your questions. You have asked 3 questions and none of them you have marked in an answer. The site works like this: you ask a question, choose the best answer and brand . If no answer was satisfactory, question who answered, but do not abandon your questions or leave unresolved because this is not part of Sopt’s purpose.

  • remembering that you earn points when accepting an answer

1 answer

0

You are using the wrong names. There is no "button":

<button value="button" onclick="criarElemento(this.value) " >Botão</button>

And the tag div must be in lower case:

<button value="div" onclick="criarElemento(this.value)" >Div</button>

Here too you should not include the variable tag in quotes, otherwise it will be treated as a string and not as the value of the function parameter:

var elemento = document.createElement("tag");

Corrected code:

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 (var i = 0; i < chaves.length; i++) {
       var opcao = document.createElemente("option");
       opcao.value = chaves[i];
       opcao.innerText = chaves[i];
       select.appendChild(opcao);
   }

}
</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)" >button</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>

Browser other questions tagged javascript html website

You are not signed in. Login or sign up in order to post.