Letras que aparecen una tras otra erro

patilanz · #1 (**permalink**) 27/08/2012, 05:25

Hola tengo el siguiente codigo :

Código Javascript:

Ver originalvar texto = 'Hola mundo';
var i = 0;
    var elintervalo = setInterval(function() {
        if(i<texto.length) {
            document.getElementById('contenido').innerHTML = texto.substr(0,i+1);   
        } else {
            clearInterval(elintervalo); 
        }
        i ++;
        
    },30);

Esto me escribe en una div con innerHTML un texto pero con un efecto como este :

1: H
2: Ho
3: Hol....

Pero en el codigo tiene un error que es que cuando el muestro del texto esta en curso y doy click en otro button que escribe otra cosa en el div tambien con innerHTML el texto del otro boton aparece para 1 segundo y luego desaparece y se continua con el muestro del texto del intervalo...

Alguien sabe como solucionar lo ??

Gracias :)

IsaBelM · #2 (**permalink**) 27/08/2012, 07:32

mas que un error es un problema de lógica. el código está bien.

cuando pulsa ese otro botón, se muestra la cadena. pero después el código que nos muestras lo sobrescribe en lugar de concatenarlo

patilanz · #3 (**permalink**) 27/08/2012, 09:01

Cita:

Iniciado por IsaBelM

mas que un error es un problema de lógica. el código está bien.

cuando pulsa ese otro botón, se muestra la cadena. pero después el código que nos muestras lo sobrescribe en lugar de concatenarlo

Gracias por tu respuesta pero esto ya lo sabia. Lo que no se es como solucionar lo..
Un saludo

IsaBelM · #4 (**permalink**) 27/08/2012, 14:38

se trata de concatenar y sobrescribir una variable

Cita:

patilanz · #5 (**permalink**) 27/08/2012, 23:52

Cita:

Iniciado por IsaBelM

se trata de concatenar y sobrescribir una variable

Gracias por tu respuesta :)

Probe el codigo pero funciona de igual manera ..
En javascript puse :

Código Javascript:

Ver originalvar texto = 'Hola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundoHola mundo';
var car = texto.split('');
var i = 0;
var agregatexto = '';
var elintervalo = setInterval(function() {
if(i<car.length) {
document.getElementById('contenido').innerHTML += car[i++] + agregatexto;
agregatexto = ''; 
} else {
clearInterval(elintervalo); 
}
 
},30);
}
function cosa() {
    document.getElementById('contenido').innerHTML = 'algo';
        clearInterval(elintervalo)  
}

Y luego en html :

Código HTML:

Ver original<body onload="b();">
<div id="contenido"></div>
<input type='button' value="añadir" onclick="cosa();" />
</body>

Pero al dar en el boton anadir el intervalo no para y pasa como en mi codigo..

Lo he subito a una pagina para que veas que pasa :

http://javascriptcsspr.comli.com/s.html

Un saludo :)

IsaBelM · #6 (**permalink**) 28/08/2012, 07:48

Cita:

Iniciado por patilanz

Gracias por tu respuesta :)

Probe el codigo pero funciona de igual manera ..

te equivocas. hay grandes un salto cualitativo entre ambos códigos

el nuevo código que muestras es incluso mas sencillo de editar para lograr lo que pretendes. como te comente en mi primer post, se trata solamente de concatenar

Cita:

document.getElementById('contenido').innerHTML += 'algo';

de la otra parte de código, quita la variable (agregatexto) y la concatenación