Javascript error when selecting the button in another tag

Question

Javascript error when selecting the button in another tag

Navigation

#1 by (0 votes)

0

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

asked by anonymous 03.06.2018 / 03:16

1 answer

.parent () within beforeSend Question about the fork system call

score 0 · Answer 1

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

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

And the div tag must be lowercase:

<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");

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