Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Puroguramu en 8 Diciembre 2012, 22:57 pm


Título: [HTML/javascript] Botones que no funcionan.
Publicado por: Puroguramu en 8 Diciembre 2012, 22:57 pm
Bueno, antes de nada hay que ver el código que me falla:



<!Doctype html>
<html>
<head>
</head>
<script type="text/javascript">
function fondocolor(color) {document.bgColor = color;}
</script>
<body>
<DIV id="texto"><h2>FONDO</h2></DIV>
<FORM>
<INPUT TYPE="button" VALUE="Rojo" onClick="fondocolor('RED')">
<INPUT TYPE="button" VALUE="Azul" onClick="fondocolor('BLUE')">
<INPUT TYPE="button" VALUE="naranja" onClick="fondocolor('ORANGE')">
<INPUT TYPE="button" VALUE="Verde" onClick="fondocolor('GREEN')">
<INPUT TYPE="button" VALUE="Negro" onClick="fondocolor('BLACK')">
<INPUT TYPE="button" VALUE="Gris" onClick="fondocolor('GRAY')">
<INPUT TYPE="button" VALUE="amarillo" onClick="fondocolor('YELLOW')">
<INPUT TYPE="button" VALUE="blanco" onClick="fondocolor('WHITE')">
</br>
</br>
<DIV id="texto"><h2>TEXTO</h2></DIV>
<INPUT TYPE="button" VALUE="Rojo" onClick="getElementById('texto').style.color='red'">
<INPUT TYPE="button" VALUE="Azul" onClick="getElementById('texto').style.color='blue'">
<INPUT TYPE="button" VALUE="naranja" onClick="getElementById('texto').style.color='orange'">
<INPUT TYPE="button" VALUE="Verde" onClick="getElementById('texto').style.color='green'">
<INPUT TYPE="button" VALUE="Negro" onClick="getElementById('texto').style.color='black'">
<INPUT TYPE="button" VALUE="Gris" onClick="getElementById('texto').style.color='grey'">
<INPUT TYPE="button" VALUE="amarillo" onClick="getElementById('texto').style.color='yellow'">
<INPUT TYPE="button" VALUE="blanco" onClick="getElementById('texto').style.color='white'">
</FORM>
</body>
</html>



El problema es que cuando yo pulso uno de los botones de abajo, las palabras "FONDO" y "TEXTO" deberían de cambiar al color que especifica el botón. Pero solo lo hace "FONDO". ¿Por qué? ¿Como lo arreglo?



Gracias por leer! ;D

Título: Re: [HTML/javascript] Botones que no funcionan.
Publicado por: 2Fac3R en 9 Diciembre 2012, 02:54 am
A mi me funciona correctamente :silbar:
Zalu2

Título: Re: [HTML/javascript] Botones que no funcionan.
Publicado por: Puroguramu en 9 Diciembre 2012, 10:00 am
Seguro? yo por mas que lo pruebo no.

Título: Re: [HTML/javascript] Botones que no funcionan.
Publicado por: #!drvy en 9 Diciembre 2012, 15:18 pm
@Puroguramu, no puedes declarar 2 veces un mismo ID.

Lo declaras tanto en TEXTO como en FONDO y no se puede. Para ello podrías usar una clase, y luego mediante getElementByClassName obtener todos los elementos que tienen dicha clase. Ahí hay un problema. IE8 (la ultima versión disponible para Windows XP) no soporta esa propiedad. Por tanto tendrás que recurrir a otros métodos mas complicados puesto que javascript no se lleva muy bien con CSS de por si...

Uno de ellos, es obtener todos los elementos de la pagina y buscar si tienen de atributo la classe "texto"...

Código
  1. <!Doctype html>
  2. <html>
  3. <head>
  4. </head>
  5. <script type="text/javascript">
  6. function fondocolor(color) {document.bgColor = color;}
  7. function color(color) {
  8.    // Obtener todos los divs de la pagina
  9.    var objeto = document.getElementsByTagName('div');
  10.    // Por cada Div..
  11.    for(var i=0;i<objeto.length;i++){
  12.       // Mirar si tiene una classe llamada texto
  13.       if(objeto[i].getAttribute('class')=='texto'){
  14.          // Si la tiene definir color.
  15.          objeto[i].style.color=color;
  16.       }
  17.    }
  18. }
  19. </script>
  20. <body>
  21. <DIV class="texto"><h2>FONDO</h2></DIV>
  22. <FORM>
  23. <INPUT TYPE="button" VALUE="Rojo" onClick="fondocolor('RED')">
  24. <INPUT TYPE="button" VALUE="Azul" onClick="fondocolor('BLUE')">
  25. <INPUT TYPE="button" VALUE="naranja" onClick="fondocolor('ORANGE')">
  26. <INPUT TYPE="button" VALUE="Verde" onClick="fondocolor('GREEN')">
  27. <INPUT TYPE="button" VALUE="Negro" onClick="fondocolor('BLACK')">
  28. <INPUT TYPE="button" VALUE="Gris" onClick="fondocolor('GRAY')">
  29. <INPUT TYPE="button" VALUE="amarillo" onClick="fondocolor('YELLOW')">
  30. <INPUT TYPE="button" VALUE="blanco" onClick="fondocolor('WHITE')">
  31. </br>
  32. </br>
  33. <DIV class="texto"><h2>TEXTO</h2></DIV>
  34. <INPUT TYPE="button" VALUE="Rojo" onClick="color('red');">
  35. <INPUT TYPE="button" VALUE="Azul" onClick="color('blue');">
  36. <INPUT TYPE="button" VALUE="naranja" onClick="color('orange');">
  37. <INPUT TYPE="button" VALUE="Verde" onClick="color('green');">
  38. <INPUT TYPE="button" VALUE="Negro" onClick="color('black');">
  39. <INPUT TYPE="button" VALUE="Gris" onClick="color('gray');">
  40. <INPUT TYPE="button" VALUE="amarillo" onClick="color('yellow');">
  41. <INPUT TYPE="button" VALUE="blanco" onClick="color('white');">
  42. </FORM>
  43. </body>
  44. </html>

También podrías usar jQuery... te hace la vida mas fácil puesto que trae un soporte excelente para manejar CSS..

PD: Por favor usa las etiquetas [code=lenguaje][/code] para introducir tu código. Donde "lenguaje" puedes usar html4strict, css o javascript. Se nos hace mas fácil leer el código =)

Saludos

Título: Re: [HTML/javascript] Botones que no funcionan.
Publicado por: Puroguramu en 9 Diciembre 2012, 17:28 pm
Muchas gracias. La proxima vez te haré caso


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines