Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Al pasar HTML mediante .innerHTML no se queda el texto

Estas en el tema de Al pasar HTML mediante .innerHTML no se queda el texto en el foro de Javascript en Foros del Web. ¡Hola a todos! Estoy haciendo una página web, y quiero que al hacer click en un botón de verificar, aparezca arriba del todo un div ...
  #1 (permalink)  
Antiguo 09/11/2014, 14:07
 
Fecha de Ingreso: noviembre-2014
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Al pasar HTML mediante .innerHTML no se queda el texto

¡Hola a todos!

Estoy haciendo una página web, y quiero que al hacer click en un botón de verificar, aparezca arriba del todo un div con un texto dentro de él. Mi código es el siguiente:

var capa = document.getElementById('div_capa');
capa.innerHTML = 'Texto';
document.getElementById('div_capa').style.border = '1px solid red';

Y en el buttom pongo el atributo onClick="nombredelafuncion()"

div_capa es el id del div creado en el html (cuyo contenido está vacío) y modifico el estilo del div para que se recuadre bien el borde.

El problema es que al cargar la página, el div con el contenido dentro aparece medio segundo y desaparece. No sé cómo hacer para que el div se quede y no desaparezca o saber qué es lo que estoy haciendo mal.

Saludos.
  #2 (permalink)  
Antiguo 09/11/2014, 14:17
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Probablemente haya algo más que esté generando ese comportamiento. Sería útil que nos muestres más código, pues, en lo que muestras, no hay nada anormal. Por cierto, si ya tomaste al elemento, no hace falta que lo vuelvas a hacer al momento de asignarle los estilos, además, siendo CSS, deberías de hacerlo en una hoja de estilos, no con JavaScript (a menos que desees que el cambio sea dinámico).

Si vas a mostrar más código, por favor, usa el highlight respectivo.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 09/11/2014, 16:27
 
Fecha de Ingreso: noviembre-2014
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

El codigo Javascript es este:

function mostrarVacios()
{
var DNI='';
var NOMBRE='';
var APELLIDOS='';

if (document.getElementById("dni").value == '')
{
DNI = ("El campo DNI no puede ser vacio");
}
if (document.getElementById("nombre").value == '')
{
NOMBRE = ("El campo nombre no puede ser vacio");
}
if (document.getElementById("apellidos").value == '')
{
APELLIDOS = ("El campo apellidos no puede ser vacio");
}

alert(DNI+'\n'+APELLIDOS+'\n'+NOMBRE);

var capa = document.getElementById('div_capa');
capa.innerHTML = DNI+ '<br>' +APELLIDOS+ '<br>'+NOMBRE;
capa.style.border = '1px solid red';

}

Se trata de una función que comprueba de un formulario si los campos dni, nombre y apellidos están vacíos. De serlo así, al darle al botón ENVIAR debe mostrar un mensaje de alerta mostrando los errores y al aceptar el mensaje, deben aparecer en un div arriba del todo los mismo mensajes que aparecieron en el alert.
  #4 (permalink)  
Antiguo 09/11/2014, 17:13
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

¿Y qué tienes en tu hoja de estilos? Quizá ahí esté la clave.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 10/11/2014, 04:18
 
Fecha de Ingreso: noviembre-2014
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

body{
background-color : beige;
}

input,select,textarea{
border: 1px solid black;
font-weight : bold;
}

#div_submit{
text-align : center;
}

#div_datos_personales,
#div_direccion,
#div_practica {
margin-bottom: 0.5em;
}

#label_dni,
#label_nombre,
#label_apellidos,
#label_email,
#label_calle,
#label_poblacion,
#label_archivo,
#label_descripcion {
display: block;
float: left;
text-align: right;
width: 6em;
padding-right: 0.5em;
}

/* Datos personales */

#div_sexo {
float: right;
}

#div_dni,
#div_nombre,
#div_apellidos,
#div_email,
#div_calle,
#div_poblacion,
#div_provincia,
#div_archivo,
#div_infoarchivo,
#div_descripcion {
margin-bottom: 0.5em;
}


Esto es lo que tengo puesto en la hoja de estilos
  #6 (permalink)  
Antiguo 10/11/2014, 13:47
Avatar de GeekGirl  
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 9 años, 9 meses
Puntos: 44
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Y cuando ejecutás esa función? En el onclick del botón? Probablemente lo que pasa es que se muestra el div unas milésimas de segundo hasta que se envía el formulario (se refresca la página y tu código insertado del lado del cliente desaparece).
Acaso en la url te aparece un # cuando desaparece tu div? Si es así, es que no estás deteniendo el envío del formulario frente al error. Te aconsejo lo siguiente:

Código Javascript:
Ver original
  1. document.getElementById('idDeTuForm').onsubmit = function()
  2. {
  3. return false; // Detenes el envío del formulario
  4.  
  5. var DNI='';
  6. var NOMBRE='';
  7. var APELLIDOS='';
  8.  
  9. if (document.getElementById("dni").value == '')
  10. {
  11. DNI = ("El campo DNI no puede ser vacio");
  12. }
  13. if (document.getElementById("nombre").value == '')
  14. {
  15. NOMBRE = ("El campo nombre no puede ser vacio");
  16. }
  17. if (document.getElementById("apellidos").value == '')
  18. {
  19. APELLIDOS = ("El campo apellidos no puede ser vacio");
  20. }
  21.  
  22. alert(DNI+'\n'+APELLIDOS+'\n'+NOMBRE);
  23.  
  24. var capa = document.getElementById('div_capa');
  25. capa.innerHTML = DNI+ '<br>' +APELLIDOS+ '<br>'+NOMBRE;
  26. capa.style.border = '1px solid red';
  27.  
  28. // Solo si los 3 valores estan completos permitis el envio del mismo
  29.  
  30. if(document.getElementById("dni").value != '' && document.getElementById("nombre").value != '' &&
  31. document.getElementById("apellidos").value != '') {
  32.     return true;
  33. }
  34. }

Aclaro que el código está hecho a las apuradas y por supuesto se puede optimizar mucho. Es solamente para darte una idea de cuál es el error.
Saludos :)
  #7 (permalink)  
Antiguo 10/11/2014, 15:57
 
Fecha de Ingreso: noviembre-2014
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Cuando desaparece el div no aparece ningún # en la url T.T

Entiendo bien lo que me estás diciendo, no estoy deteniendo el envío del formulario y por tanto al recargar la página el div desaparece, pero no sé cómo escribirlo en mi código javascript ni en el html >.<

Perdonad que sea un poco novata, pero acabo de empezar en este mundillo y no tengo mucha idea.
  #8 (permalink)  
Antiguo 10/11/2014, 18:24
Avatar de GeekGirl  
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 9 años, 9 meses
Puntos: 44
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Bueno. El código que te pase hace todo lo mismo que tu función. Lo único que deberías cambiar en él, es el id ficticio que puse por el id de tu formulario.

Si no lo tiene, ponle uno.

Y elimina el llamado a la función mostrarVacios(). Simplemente deja que con el id del formulario se invoque el evento onsubmit y tendría que andar sin problemas :)
  #9 (permalink)  
Antiguo 11/11/2014, 01:04
 
Fecha de Ingreso: noviembre-2014
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Nada, no me funciona >.<

De esta forma, ni siquiera me aparece el mensaje de alerta y el div las milésimas de segundo.

¿Debo poner algo en la etiqueta del form o en el buttom?
  #10 (permalink)  
Antiguo 11/11/2014, 02:25
Avatar de GeekGirl  
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 9 años, 9 meses
Puntos: 44
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Mala mía :P
Baja el return false para que no corte la ejecución del código como te muestro acá, y acordate de llamar al formulario por su id y no por el que hay puesto de ejemplo en este código.

Código Javascript:
Ver original
  1. document.getElementById('idDeTuForm').onsubmit = function()
  2. {
  3.  
  4. var DNI='';
  5. var NOMBRE='';
  6. var APELLIDOS='';
  7.  
  8. if (document.getElementById("dni").value == '')
  9. {
  10. DNI = ("El campo DNI no puede ser vacio");
  11. }
  12. if (document.getElementById("nombre").value == '')
  13. {
  14. NOMBRE = ("El campo nombre no puede ser vacio");
  15. }
  16. if (document.getElementById("apellidos").value == '')
  17. {
  18. APELLIDOS = ("El campo apellidos no puede ser vacio");
  19. }
  20.  
  21. alert(DNI+'\n'+APELLIDOS+'\n'+NOMBRE);
  22.  
  23. var capa = document.getElementById('div_capa');
  24. capa.innerHTML = DNI+ '<br>' +APELLIDOS+ '<br>'+NOMBRE;
  25. capa.style.border = '1px solid red';
  26.  
  27. // Solo si los 3 valores estan completos permitis el envio del mismo
  28.  
  29. if(document.getElementById("dni").value != '' && document.getElementById("nombre").value != '' &&
  30. document.getElementById("apellidos").value != '') {
  31.     return true;
  32. } else {
  33. return false;
  34. }
  35. }
  #11 (permalink)  
Antiguo 11/11/2014, 02:32
Avatar de GeekGirl  
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 9 años, 9 meses
Puntos: 44
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Al botón le sacaste el evento onclick? Y de qué tipo es? Debe ser de tipo submit y no button.

Fijate este ejemplo: http://www.w3schools.com/js/js_form_validation.asp
  #12 (permalink)  
Antiguo 11/11/2014, 04:47
 
Fecha de Ingreso: noviembre-2014
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Sigue sin funcionar.

Antes tenía <button id="submit" >Enviar</button> y lo he cambiado por <input id="submit" type="submit" value="Enviar">

¿Debería poner el atributo onclick? Si es así, qué valor le pongo al atributo?
  #13 (permalink)  
Antiguo 11/11/2014, 06:18
Avatar de GeekGirl  
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 9 años, 9 meses
Puntos: 44
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Está bien el input. Y cómo estás llamando al evento onsubmit? Estaría bueno ver el JS también. Con las herramientas que te di tendrías que poder hacerlo sin problemas.
  #14 (permalink)  
Antiguo 11/11/2014, 06:47
 
Fecha de Ingreso: noviembre-2014
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Este es el JS

document.getElementById('formulario').onsubmit = function()
{


var DNI='';
var NOMBRE='';
var APELLIDOS='';

if (document.getElementById("dni").value == '')
{
DNI = ("El campo DNI no puede ser vacio");

}
if (document.getElementById("nombre").value == '')
{
NOMBRE = ("El campo nombre no puede ser vacio");

}
if (document.getElementById("apellidos").value == '')
{
APELLIDOS = ("El campo apellidos no puede ser vacio");

}



alert(DNI+'\n'+APELLIDOS+'\n'+NOMBRE);

var capa = document.getElementById('div_capa');
capa.innerHTML = DNI+ '<br>' +APELLIDOS+ '<br>'+NOMBRE;
capa.style.border = '1px solid red';


if(document.getElementById("dni").value != '' && document.getElementById("nombre").value != '' &&
document.getElementById("apellidos").value != '' ) {
return true;
}
else{
return false;
}
}


Y el html es este

<div id="div_capa">
</div>


<div id="div_form">

<form id="formulario">


<div id="div_datos_personales">

<fieldset>

<legend>Datos personales</legend>


<div id="div_dni">
<label id="label_dni" for="dni">D.N.I.:</label>
<input id="dni" name="dni" type="text" maxlength="8"/>-
<input id="letra" name="letra" type="text" maxlength="1"/>
</div>

<div id="div_nombre">
<label id="label_nombre" for="nombre">Nombre:</label>
<input id="nombre" name="nombre" type="text"/>
</div>

<div id="div_apellidos">
<label id="label_apellidos" for="apellidos">Apellidos:</label>
<input id="apellidos" name="apellidos" type="text"/>
</div>

</fieldset>

</div>

<div id="div_submit">
<input id="submit" type="submit" value="Enviar">
</div>

</form>

</div>


No he puesto ningún evento, ni onClick, ni submit, porque no sé qué poner. Antes lo tenía puesto en onClick con el nombre de la función, pero al eliminar la función no sé qué poner.
  #15 (permalink)  
Antiguo 11/11/2014, 08:03
Avatar de GeekGirl  
Fecha de Ingreso: julio-2014
Mensajes: 423
Antigüedad: 9 años, 9 meses
Puntos: 44
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

Pues este código está funcionando perfectamente. El único detalle es que el JS está antes de el div y no va a encontrar el elemento de esa manera. Lo único que tenés que hacer es ponerlo por debajo y funciona sin problemas. Yo misma lo probé:

Código HTML:
<div id="div_capa">
</div>


<div id="div_form">

<form id="formulario">


<div id="div_datos_personales">

<fieldset>

<legend>Datos personales</legend>


<div id="div_dni">
<label id="label_dni" for="dni">D.N.I.:</label>
<input id="dni" name="dni" type="text" maxlength="8"/>-
<input id="letra" name="letra" type="text" maxlength="1"/>
</div>

<div id="div_nombre"> 
<label id="label_nombre" for="nombre">Nombre:</label>
<input id="nombre" name="nombre" type="text"/>
</div>

<div id="div_apellidos"> 
<label id="label_apellidos" for="apellidos">Apellidos:</label>
<input id="apellidos" name="apellidos" type="text"/>
</div>

</fieldset>

</div>

<div id="div_submit">
<input id="submit" type="submit" value="Enviar">
</div>

</form>

</div> 

<script type="text/javascript">
    
document.getElementById('formulario').onsubmit = function()
{


var DNI='';
var NOMBRE='';
var APELLIDOS='';

if (document.getElementById("dni").value == '')
{ 
DNI = ("El campo DNI no puede ser vacio");

}
if (document.getElementById("nombre").value == '')
{
NOMBRE = ("El campo nombre no puede ser vacio");

}
if (document.getElementById("apellidos").value == '')
{
APELLIDOS = ("El campo apellidos no puede ser vacio");

}





if(document.getElementById("dni").value != '' && document.getElementById("nombre").value != '' &&
document.getElementById("apellidos").value != '' ) {
return true;
}
else{
alert(DNI+'\n'+APELLIDOS+'\n'+NOMBRE);

var capa = document.getElementById('div_capa');
capa.innerHTML = DNI+ '<br>' +APELLIDOS+ '<br>'+NOMBRE;
capa.style.border = '1px solid red';
return false;
}
}
    
</script> 
Una cosa más, metí el alert y todo eso dentro de la salida de error del if. Sino te generaba un alert en blanco cuando estaban los campos completos.
Saludos
  #16 (permalink)  
Antiguo 12/11/2014, 04:48
 
Fecha de Ingreso: noviembre-2014
Mensajes: 8
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Al pasar HTML mediante .innerHTML no se queda el texto

¡¡¡Funcionó!!!

Muchísimas gracias de verdad, gracias por tu colaboración ;)

Etiquetas: html+javascript, innerhtml
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:05.