Agregar varios elementos con getElementById

Jezukaz · #1 (**permalink**) 28/06/2014, 13:20

Hola, como puedo hacer para agregar varios elementos con getElementById.

Este es mi código:

Código:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Crear elemento HTML</title>
        <script type="text/javascript">

            function addElement(proceso,rafaga){

                var capa = document.getElementById("capa");
                var h1 = document.createElement("h1");
                var h2 = document.createElement("h2");
                
                h1.innerHTML = proceso;
                h2.innerHTML = rafaga;
                capa.appendChild(h1);
                capa.appendChild(h2);
            }

        </script>
    </head>
    <body>
        <div id="capa">
        </div>
        <form>
            <label for=proceso">Texto:</label><input id="proceso" type="text" size=40/>
            <label for=rafaga">Texto:</label><input id="rafaga" type="text" size=40/>
            <label for=llegada">Texto:</label><input id="llegada" type="text" size=40/>
            <label for=prioridad">Texto:</label><input id="prioridad" type="text" size=40/>
            <input type="button" onClick="addElement(getElementById('proceso','rafaga').value);" value="Agregar Proceso"/>
        </form>

     </body>
</html>

Me agrega el primer dato, pero los demás NO.
Quisiera que me ayuden, soy novato. GRACIAS.

Triby · #2 (**permalink**) 28/06/2014, 18:40

Código Javascript:

Ver original// La parte del onclick está mal
addElement(getElementById('proceso','rafaga').value);
 
// Debes enviar dos argumentos a la función:
addElement(getElementById('proceso').value, getElementById('rafaga').value);

No revisé el resto del código, si hay error, abre la consola de errores (Firefox o Chrome) para que te enteres de que se trata y podamos tratar de ayudar sobre algo más concreto.

Italico76 · #3 (**permalink**) 28/06/2014, 19:12

Es cierto lo que dice @Triby de que el onClick esta mal, yo lo haria asi:

Código Javascript:

Ver original<input type="button" onClick="addElement('proceso','h1'); addElement('rafaga','h2');" value="Agregar Proceso"/>

y el JS este:

Código Javascript:

Ver original<script type="text/javascript">
 
            function addElement(id,elem){
 
                var capa= document.getElementById("capa");
                var elem    = document.createElement(elem);
                                            
                elem.innerHTML = document.getElementById(id).value;                
                capa.appendChild(elem);                
            }
 
        </script>

COMPLETO:

Código Javascript:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Crear elemento HTML</title>
    </head>
    <body>
        <div id="capa">
        </div>
        <form>
            <label for="proceso">Texto:</label><input id="proceso" type="text" size=40/><br/>
            <label for="rafaga">Texto:</label><input id="rafaga" type="text" size=40/><br/>
            <label for="llegada">Texto:</label><input id="llegada" type="text" size=40/><br/>
            <label for="prioridad">Texto:</label><input id="prioridad" type="text" size=40/><br/>
            <input type="button" onClick="addElement('proceso','h1'); addElement('rafaga','h2');" value="Agregar Proceso"/>
        </form>
 
     </body>
</html>
 
       <script type="text/javascript">
 
            function addElement(id,elem){
 
                var capa= document.getElementById("capa");
                var elem    = document.createElement(elem);
                                            
                elem.innerHTML = document.getElementById(id).value;                
                capa.appendChild(elem);                
            }
 
        </script>