[HTML/javascript] Botones que no funcionan.

Iniciado por Puroguramu, 8 Diciembre 2012, 22:57 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Puroguramu

8 Diciembre 2012, 22:57 PM Ultima modificación: 8 Diciembre 2012, 23:25 PM por Puroguramu
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

2Fac3R

#1
9 Diciembre 2012, 02:54 AM
A mi me funciona correctamente :silbar:
Zalu2
Escuela de Hackers & Programación. http://ihackndev.blogspot.com/

Puroguramu

#2
9 Diciembre 2012, 10:00 AM
Seguro? yo por mas que lo pruebo no.

#!drvy

#3
9 Diciembre 2012, 15:18 PM Ultima modificación: 9 Diciembre 2012, 15:21 PM por drvy | BSM
@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 (javascript) [Seleccionar]
<!Doctype html>
<html>
<head>
</head>
<script type="text/javascript">
function fondocolor(color) {document.bgColor = color;}
function color(color) {
  // Obtener todos los divs de la pagina
  var objeto = document.getElementsByTagName('div');
  // Por cada Div..
  for(var i=0;i<objeto.length;i++){
     // Mirar si tiene una classe llamada texto
     if(objeto[i].getAttribute('class')=='texto'){
        // Si la tiene definir color.
        objeto[i].style.color=color;
     }
  }
}
</script>
<body>
<DIV class="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 class="texto"><h2>TEXTO</h2></DIV>
<INPUT TYPE="button" VALUE="Rojo" onClick="color('red');">
<INPUT TYPE="button" VALUE="Azul" onClick="color('blue');">
<INPUT TYPE="button" VALUE="naranja" onClick="color('orange');">
<INPUT TYPE="button" VALUE="Verde" onClick="color('green');">
<INPUT TYPE="button" VALUE="Negro" onClick="color('black');">
<INPUT TYPE="button" VALUE="Gris" onClick="color('gray');">
<INPUT TYPE="button" VALUE="amarillo" onClick="color('yellow');">
<INPUT TYPE="button" VALUE="blanco" onClick="color('white');">
</FORM>
</body>
</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

Puroguramu

#4
9 Diciembre 2012, 17:28 PM
Muchas gracias. La proxima vez te haré caso
Imprimir
Ir Arriba Páginas1
Acciones del Usuario