Texto que cambia segun valor de input.

alexisfch · #1 (**permalink**) 31/03/2009, 09:51

Hola:

Necesito que el texto de mi web cambie en funcion de lo que se escriba en el campo de texto.
Esto es lo que llevo:

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Borde a texto</title>
</head>

<body>


<table width="600" border="0" align="center" cellpadding="1" cellspacing="1">
  <tr>
    <td><div style="position:relative;">
<script>
<!--


	var message="letraconborde";
	var thickness=1;
	var color2="black";
	var color1="red";
	var extra="font-size:60px;";
	
	var x = -thickness;
	var y = -thickness;

	while (y<=thickness) {
		while (x<=thickness) {
			document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+(-y)+";'>"+message+"</span>");
			document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:0;'>"+message+"</span>");
			document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+y+";'>"+message+"</span>");
			x=x+1;
		}
		y=y+1;
	} 	

	document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");


//-->
</script>
</div></td>
  </tr>
  <tr>
    <td height="49">&nbsp;</td>
  </tr>
  <tr>
    <td height="96"><div align="center">
      <input name="campo1" type="text" id="campo1">
    </div></td>
  </tr>
  
</table>

<p>&nbsp;</p>
</body>
</html>

Saludos.

David · #2 (**permalink**) 31/03/2009, 09:53

¿Cuál es exactamente el texto que quieres cambiar? Dependiendo del caso puedes cambiar el innerHTML del tag que contiene el texto

.

alexisfch · #3 (**permalink**) 31/03/2009, 09:59

Quiero cambiar el mensjae "letraconborde" si corres el ejemplo que puse veras que el objetivo es que ese mensaje que tiene un outline cambie a lo que escribo en el input de abajo.

alexisfch · #4 (**permalink**) 31/03/2009, 10:18

Alguna idea??

David · #5 (**permalink**) 31/03/2009, 10:24

Así:

Código javascript:

Ver originalfor (i = 0, elems = document.getElementsByTagName("span"); elem = elems[i]; i++) {
    elem.innerHTML = "nuevo texto";
}

Lo que hace ese código es recorrer todos los span y cambiarle el valor. Si quieres tomar el valor del input como referencia, usa getElementById para obtener el elemento y usa su propiedad value para saber qué tiene escrito.

alexisfch · #6 (**permalink**) 31/03/2009, 10:30

Gracias, lo probe pero no me funciona, soy muy newbie, podrias darme un ejemplillo men.

David · #7 (**permalink**) 31/03/2009, 10:32

Ya te dí un ejemplo, alexisfch.

Es bueno que trates de implementarlo por tu cuenta, buscar información al respecto, así aprenderás mejor que si yo te doy un ejemplo completo.

Si tienes algún problema al intentarlo, dinos cómo estás tratando de implementar y qué error te da.

alexisfch · #8 (**permalink**) 31/03/2009, 11:15

ya lo logre como me dijiste:

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Borde a texto</title>
</head>

<body>


<input name="campo1" type="text" id="campo1" onKeyUp="cambia();">
<table width="600" height="600" border="1" align="center" cellpadding="1" cellspacing="1">
  <tr>
    <td><div style="position:relative;">
<script>
<!--


	var message="letraconborde";
	var thickness=1;
	var color2="black";
	var color1="red";
	var extra="font-size:60px;";
	
	var x = -thickness;
	var y = -thickness;

	while (y<=thickness) {
		while (x<=thickness) {
			document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+(-y)+";'>"+message+"</span>");
			document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:0;'>"+message+"</span>");
			document.write ("<span style='"+extra+" color:"+color2+"; position:absolute; left:"+x+"; top:"+y+";'>"+message+"</span>");
			x=x+1;
		}
		y=y+1;

	} 	

	document.write ("<span style='"+extra+" color:"+color1+"; position:absolute; left:0; top:0;'>"+message+"</span>");


//-->

</script>

<script>
function cambia(){

for (i = 0, elems = document.getElementsByTagName("span"); elem = elems[i]; i++) {    elem.innerHTML = document.getElementById('campo1').value;};
}

</script>
</div></td>
  </tr>
</table>

<p>&nbsp;</p>
</body>
</html>

El tema es que de que manera podria hacer que este campo de texto estuviera en otro marco y que desde ahi me modificara el texto (que tambien estuviera en otro marco) es decir que de una pagina web modificara otra.

David · #9 (**permalink**) 31/03/2009, 11:17

Podría ser:

Código javascript:

Ver originaltop.frames.nombre_del_otro_frame.document.getElementById('campo').value

alexisfch · #10 (**permalink**) 31/03/2009, 12:09

Funcina perfecto, pero tengo una duda, tu me dijiste que ese codigo era cambiar todos los span del texto, que pasaria si yo tuviera mastextos como este y a la vez mas campos de texto, como podria cambiar un determinado span y no todos al mismo tiempo.

David · #11 (**permalink**) 31/03/2009, 12:16

Puedes asignar un id al span y cambiar el contenido así:

Código javascript:

Ver originaldocument.getElementById("idspan").innerHTML = "nuevo texto";