Tengo un codigo html con varios input check que cambian el color del fondo tanto como el texto y cuando los colores son iguales, envió un alerta para no permitir seleccionar los colores iguales.
pero tengo un problema que al seleccionar primero el color negro de fondo al entrar al sitio, cambia el fondo, pero no alerta que el texto ya esta en negro, entonces no se ve.
<div class="grupo">
<h1>Color de fondo</h1>
<input type="radio" name="fon" onclick="colorFondo('#fff');" />
Blanco <br />
<input type="radio" name="fon" onclick="colorFondo('#000');" />
Negro <br />
<input type="radio" name="fon" onclick="colorFondo('#f00');" />
Rojo <br />
<input type="radio" name="fon" onclick="colorFondo('#0f0');" />
Verde <br />
<input type="radio" name="fon" onclick="colorFondo('#00f');" />
Azul
</div>
<div class="grupo">
<h1>Color de texto</h1>
<input type="radio" name="texto" onclick="colorTexto('#fff');" />
Blanco <br />
<input type="radio" name="texto" onclick="colorTexto('#000');" />
Negro <br />
<input type="radio" name="texto" onclick="colorTexto('#f00');" />
Rojo <br />
<input type="radio" name="texto" onclick="colorTexto('#0f0');" />
Verde <br />
<input type="radio" name="texto" onclick="colorTexto('#00f');" />
Azul
</div>
<script>
// Defino variables GLOBALES
var fondo;
var texto;
// Funcion para llamar ejecutar color de fondo
function colorFondo(color) {
// le damos un valor a la varible global
fondo = color;
// Creamos una condicion para comprobar el color seleccionado
if(fondo != texto){
document.bgColor = color;
}else{
alert('no es posible seleccionar este color');
}
}
// Funcion para llamar ejecutar el color de texto
function colorTexto(color) {
// le damos un valor a la varible global
texto = color;
// Creamos una condicion para comprobar el color seleccionado
if(texto != fondo ){
document.fgColor = color;
}else{
alert('no es posible seleccionar este color');
}
}
</script>