Crear un espejo palíndromo de Textareas

Bam_Margera · #1 (**permalink**) 26/03/2010, 12:42

Muy buenas,

Tengo que entregar unos trabajillos para mañana y bueno, no entiendo que falla en este...

Lo que tiene que hacer, que cada vez que pulses el botón. Que ponga la ultima letra del primer text area en la primera posición del segundo text area.
En la siguiente pulsación, la penultima en la segunda, etc...

De momento estoy intentando que me pase letra a letra sin invertir el string, pero no me lo hace,

tengo el siguiente código

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Espejo Palíndromo</title>
        <script type="text/javascript">
			var longitud = 0;
			var indice = 0;
			var origen = '';
			var destino = '';
			
			function palindromar_caracter(){
				var text_origen = document.getElementById("origen");
            	               var text_destino = document.getElementById("destino");
				origen = text_origen.innerHTML;
				destino = text_destino.innerHTML;
				var letra = origen[indice];
				
				text_destino.innerHTML = destino + origen[indice];
				indice = indice + 1;
				
        		
			}
			
			
		</script>
	</head>
	<body>
		
		<textarea id="origen" name="origen">La ruta natural</textarea>
		<textarea id="Destino" name="destino"></textarea>
		<button onclick="palindromar_caracter();">Palindromar letra</button>
	</body>
</html>

he probado un alert(origen[indice]) y me muestra caracter a caracter correctamente, pero al cambiar el alert por los inner, no hace nada...

Que pasa ?

Panino5001 · #2 (**permalink**) 26/03/2010, 13:44

Para textarea no se usa innerHTML sino value:

Código PHP:

  <form> 
<textarea id="origen" name="origen">La ruta natural</textarea> 
        <textarea id="Destino" name="destino"></textarea> 
        <button onclick="Destino.value=origen.value.split('').reverse().join('').substr(-Destino.value.length+origen.value.length-1); return false;">Palindromar letra</button> 
</form>

Adler · #3 (**permalink**) 26/03/2010, 13:46

Hola

- En la id del textarea destino habías escrito Destino, cuidado que javascript es sensible a mayúsculas y minúsculas
- Necesitabas hacer un split para poder usar el contador

Prueba ahora

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Espejo Palíndromo</title>
        <script type="text/javascript">
            var longitud = 0;
            var indice = 0;
            var origen = '';
            var destino = '';
            
            function palindromar_caracter(){
                var text_origen = document.getElementById("origen");
                               var text_destino = document.getElementById("destino");
                origen = text_origen.innerHTML;
divorigen = origen.split("");
                destino = text_destino.innerHTML;
                var letra = divorigen[indice];
                
                text_destino.innerHTML = destino + origen[indice];
                indice = indice + 1;
                
                
            }
            
            
        </script>
    </head>
    <body>
        
        <textarea id="origen" name="origen">La ruta natural</textarea>
        <textarea id="destino" name="destino"></textarea>
        <button onclick="palindromar_caracter();">Palindromar letra</button>
    </body>
</html>

Suerte

Adler · #4 (**permalink**) 26/03/2010, 13:48

Cita:

Iniciado por Panino5001

Para textarea no se usa innerHTML sino value:

Código PHP:

  <form>
<textarea id="origen" name="origen">La ruta natural</textarea>
        <textarea id="Destino" name="destino"></textarea>
        <button onclick="Destino.value=origen.value.split('').reverse().join('').substr(-Destino.value.length+origen.value.length-1); return false;">Palindromar letra</button>
</form>

Panino yo lo he probado con innerHTML y funciona

Panino5001 · #5 (**permalink**) 26/03/2010, 14:00

En explorer 8 y en navegadores estandar funciona, pero en Explorer 7 ó - no funcionará ;)

Adler · #6 (**permalink**) 26/03/2010, 14:50

Cita:

Iniciado por Panino5001

En explorer 8 y en navegadores estandar funciona, pero en Explorer 7 ó - no funcionará ;)

Perfecto

Bam_Margera · #7 (**permalink**) 26/03/2010, 16:06

Vaya, pues al parecer sí era la mayúscula...
y sin el split me funciona a mi, aunque al acabar las letras el texto me empieza a imprimir undefined (normal)

así

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Espejo Palíndromo</title>
        <script type="text/javascript">
			var longitud = 0;
			var indice = 0;
			var origen = '';
			var destino = '';
			
			function palindromar_caracter(){
				var text_origen = document.getElementById("origen");
            	var text_destino = document.getElementById("destino");
				origen = text_origen.innerHTML;
				var ultima = text_origen.length;
				destino = text_destino.innerHTML;
				var letra = origen[indice];
				
				text_destino.innerHTML = destino + letra;
				indice = indice + 1;
				
        		
			}
			
			
		</script>
	</head>
	<body>
		
		<textarea id="origen" name="origen">La ruta natural</textarea>
		<textarea id="destino" name="destino"></textarea>
		<button onclick="palindromar_caracter();">Palindromar letra</button>
	</body>
</html>

ahora intento coger de final a principio y me imprime undefined todo el rato

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Espejo Palíndromo</title>
        <script type="text/javascript">
			var longitud = 0;
			var indice = 0;
			var origen = '';
			var destino = '';
			
			function palindromar_caracter(){
				var text_origen = document.getElementById("origen");
            	var text_destino = document.getElementById("destino");
				origen = text_origen.innerHTML;
				var ultima = text_origen.length;
				destino = text_destino.innerHTML;
				var letra = origen[ultima - indice];
				
				text_destino.innerHTML = destino + letra;
				indice = indice + 1;
				
        		
			}
			
			
		</script>
	</head>
	<body>
		
		<textarea id="origen" name="origen">La ruta natural</textarea>
		<textarea id="destino" name="destino"></textarea>
		<button onclick="palindromar_caracter();">Palindromar letra</button>
	</body>
</html>

Para que es necesario el split? no comprendo..

Muchas gracias :)

Adler · #8 (**permalink**) 26/03/2010, 16:48

Hola

No le has hecho mucho caso a Panino

Prueba ahora

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Espejo Palíndromo</title>
        <script type="text/javascript">
            var longitud = 0;
            var indice = 0;
            var origen = '';
            var destino = '';
            
            function palindromar_caracter(){
                var text_origen = document.getElementById("origen");
                               var text_destino = document.getElementById("destino");
                origen = text_origen.value;
divorigen = origen.split("").reverse().join("");
if(indice < divorigen.length) {
                destino = text_destino.value;
                var letra = divorigen[indice];
                text_destino.innerHTML = destino + letra;
}
                indice = indice + 1;
                
                
            }
            
            
        </script>
    </head>
    <body>
        
        <textarea id="origen" name="origen">La ruta natural</textarea>
        <textarea id="destino" name="destino"></textarea>
        <button onclick="palindromar_caracter();">Palindromar letra</button>
    </body>
</html>

Suerte

Bam_Margera · #9 (**permalink**) 26/03/2010, 17:19

Cita:

Iniciado por Adler

Hola

No le has hecho mucho caso a Panino

Prueba ahora

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Espejo Palíndromo</title>
        <script type="text/javascript">
            var longitud = 0;
            var indice = 0;
            var origen = '';
            var destino = '';
            
            function palindromar_caracter(){
                var text_origen = document.getElementById("origen");
                               var text_destino = document.getElementById("destino");
                origen = text_origen.value;
divorigen = origen.split("").reverse().join("");
alert(divorigen[0]);
                destino = text_destino.value;
                var letra = divorigen[indice];
                
                text_destino.innerHTML = destino + letra;
                indice = indice + 1;
                
                
            }
            
            
        </script>
    </head>
    <body>
        
        <textarea id="origen" name="origen">La ruta natural</textarea>
        <textarea id="destino" name="destino"></textarea>
        <button onclick="palindromar_caracter();">Palindromar letra</button>
    </body>
</html>

Suerte

Claro que le he hecho caso, por eso mismo preguntaba de qué sirve el split.. EL codigo funciona :D solo que quería intentar terminar mi código,

Bueno asi se queda

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Espejo Palíndromo</title>
        <script type="text/javascript">
            var longitud = 0;
            var indice = 0;
            var origen = '';
            var destino = '';
            
            function palindromar_caracter(){
                var text_origen = document.getElementById("origen");
                var text_destino = document.getElementById("destino");
                origen = text_origen.value;
				divorigen = origen.split("").reverse().join("");
				destino = text_destino.value;
                var letra = divorigen[indice];
                if(indice <= (origen.length -1)){
                	text_destino.innerHTML = destino + letra;
                	indice = indice + 1;
				 }else{
					 alert("no hay más caracteres");
				  }
                
                
            }
            
            
        </script>
    </head>
    <body>
        
        <textarea id="origen" name="origen">La ruta natural</textarea>
        <textarea id="destino" name="destino"></textarea>
        <button onclick="palindromar_caracter();">Palindromar letra</button>
    </body>
</html>

Deberían dármelo por bueno.. no?

Un saludo chicos, Muchas gracias

Viva ForosDelWeb! xD

Bam_Margera · #10 (**permalink**) 26/03/2010, 17:48

ya que estamos, el siguiente

Un simple login,

En este caso, siempre me dice login incorrecto, es decir, ni siquiera detecta el usuario..
(Espero que no os moleste que vaya preguntao, no esto pidiendo el codigo codigo completo... os pongo el mio :P. Voy a contrareloj...)

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Espejo Palíndromo</title>
<script type="text/javascript">
			var usuarios = "user admin demo";
			var passwords = "passuser passadmin passdemo";
			var existe = false;
			var correcto = false;
			function login(){
				var user_var = document.getElementById("user");
            	var pass_var = document.getElementById("password");
				
				tusers = usuarios.split(" ");
				tpass = passwords.split(" ");
				for(x = 0; x < tusers.lenght; x++){
					if(tusers[x]==user_var.value){
						existe = true;
						
				 		if(tpass[x]==pass_var.value){
							correcto = true;
						}
						break;
						alert("aqui salimos, x= " + x);
        		
					}	
				
        		
				}
				if(correcto==true){
				
						alert("hola " + user_var.value);
        		
				}else{
						
						if(existe==true){
							alert("error: El has introducido un password incorrecto");
        		
						}else{
						
							alert("error: login incorrecto");
				
        		
						}
				
        		
				}
        		
			}
			
			
		</script>
</head>
<body>
<label>Usuario</label>
<input type="text" id="user" name="user">
</input>
<label>Password</label>
<input type="text" id="password" name="password">
</input>
<button onclick="login();">Aceptar</button>
</body>
</html>

Yo lo veo bien, pero claro.. yo... xD