Una Pequeña catedra de DOM en JS

[Stackado]

Bueno, me encuentro leyendo la "Introduccion a Javascript" de Librosweb.es y esta muy bueno el libro para aprender, aunque me esta costando algo de trabajo porque soy malo pensando ( ordenadamente la menos ).

Pues me encuentro en el capitulo de la creacion, modificacion y eliminacion de los elementos DOM de una pagina, y como ejercicio aparte, estoy tratando de hacer algo parecido a lo que metroflog hace con sus comentarios, ir agregandolos a la pagina sin recargarla, sin embargo parece ser que algo me esta saliendo mal, pues en vez de el comentario que deseo que aparezca, me sale solamente "undefined", entonces acudo a ustedes para ver si podrian instruirme un poco acerca de porque lo que estoy usando no funciona y que deveria usar y porque (si no es mucha molestia claro )

El codigo que utilizo es el siguiente:

Código Javascript:

function agrega(){
 
//Agregar un elemento a la Pagina Web
 
// Crear nodo de tipo Element
var parrafo = document.createElement("p");
 
// Crear nodo de tipo Text
var texto = document.createElement("textarea");
 
//Se almacena el contenido del textarea
var contenido = document.getElementById('comment').value;
 
// Añadir el nodo Text como hijo del nodo Element
document.body.appendChild(parrafo);
 
parrafo.innerHTML = contenido.value;
 
}
 

Y lo activo de la siguiente manera:

Código HTML:

<input type="button" value="Agregar un Parrafo" Onclick="javascript:agrega()"/>
 

Quizas deveria usar appendchild pero porque no innerHTML?, porque el undefined?, porque el usar value no funciona?

[Maganius]

Te pongo en color ROJO tu ERROR

function agrega(){

//Agregar un elemento a la Pagina Web

// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var texto = document.createElement("textarea");

//Se almacena el contenido del textarea
var contenido = document.getElementById('comment').value;

// Añadir el nodo Text como hijo del nodo Element
document.body.appendChild(parrafo);

parrafo.innerHTML = contenido.value;


Estas accediendo a contenido.value y tu ya tienes defenido el value en contenido. el script quedaria asi:

Código Javascript:

function agrega(){
     
    //Agregar un elemento a la Pagina Web
     
    // Crear nodo de tipo Element
    var parrafo = document.createElement("p");
     
    // Crear nodo de tipo Text
    var texto = document.createElement("textarea");
     
    //Se almacena el contenido del textarea
    var contenido = document.getElementById('comment').value;
     
    // Añadir el nodo Text como hijo del nodo Element
    document.body.appendChild(parrafo);
     
    parrafo.innerHTML = [COLOR="Red"]contenido[/COLOR];
     
    }
 

[Stackado]

OH ya veo, y creo que lo entiendo, no es necesario acceder a la propiedad value de contenido ya que este ya contiene el valor value deL textarea comment, entonces es por eso que me manda un undefined?, porque en el value del contenido no tenia nada?

Un saludo y gracias por su tiempo

[Maganius]

No, te manda undefined porque no podes acceder al value de un elemento 2 veces.

En tu script lo que tu estas haciendo es como si estubieras escribiendo esto:

document.getElementById('comment').value.value;

Así es como lo estas escribiendo en tu script.

por eso necesitas borrar el .value de tu segunda variable "contenido.value" quedaria "contenido" para que funcionase correctamente