JavaScript - Ayuda DOM

   
Vista:

Ayuda DOM

Publicado por Mstti martinstti@gmail.com (2 intervenciones) el 19/09/2014 16:39:49
Hola soy nuevo en javaScript, espero que me puedan ayudar con el siguiente problema. Tengo una lista desordenada <ul> a la cual quiero agregar elementos <li> con java script, el contenido de elemento <li>se obtiene de un campo de texto. El codigo que recupera el texto, crea el elemento <li> y agrega a la lista <ul> es:
1
2
3
4
5
6
7
8
function handleButtonClick() {
    var textInput = document.getElementById("songTextInput");
    var songName = textInput.value; // recupermos el texto
    var li = document.createElement("li"); //creamos el elemento <li>
    li.innerHTML = songName;
    var ul = document.getElementById("playlist");
    ul.appendChild(li);// agregamos el elemento <li> a <ul>
 }
La funcion agrega el elemento <li>luego AUTOMATICAMENTE actualiza la pagina y elimina nuevamente el elemento <li> creado, como puedo hacer para que no se actualice automaticamente., o para que no se elimine el elemento <li> creado.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Ayuda DOM

Publicado por xve (1594 intervenciones) el 19/09/2014 19:15:31
Hola Mstti, entiendo que el problema lo tienes en el botón del formulario que hace el submit, no?

Nos puedes mostrar el formulario, y donde el usuario pulsa el botón?

Mira este código, hace exactamente lo que estas haciendo:
http://www.lawebdelprogramador.com/codigo/JavaScript/2680-Agregar_y_eliminar_elementos_li_de_una_lista_ul_con_javascript.html
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Ayuda DOM

Publicado por Mstti (2 intervenciones) el 22/09/2014 03:40:36
Hola xve!, el problema estaba en el boton del formulario como dijiste, me falto el "return false" que por lo que entendi es para que no se ejecute la acción por defecto del elemento, es asi?. gracias por la ayuda!

1
<input type="submit" onclick=" handleButtonClick(); return false; " value="añadir li">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Ayuda DOM

Publicado por xve (1594 intervenciones) el 22/09/2014 08:46:27
Gracias por compartirlo Mstti!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar