0

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>
4
  • Pon en body un evento onload="iniciarColores()" y crea un método iniciarColores(){ } que asigne a tus variables globales los valores iniciales texto = "#000", fondo="#fff" (imagino que sean esos) de modo que al verificar a la primera asignación hay valor a comparar.
    – quevedo
    Commented el 25 sept. 2020 a las 2:23
  • si era eso, muchas gracias.. pero seria igual si ingreso las variables dentro de la funcion?, podria solucionarlo con eso tambien?
    – GhostCoder
    Commented el 25 sept. 2020 a las 2:31
  • Podrías usar un selector para leer los atributos. Es buena solución si no se puede controlar la asignación, o si no se desea usar variables globales. Lo voy a agregar a la respuesta.
    – quevedo
    Commented el 25 sept. 2020 a las 2:35
  • Ya edité la respuesta para ilustrar el mecanismo sin necesidad de usar variables globales. Usando los atributos actuales
    – quevedo
    Commented el 25 sept. 2020 a las 2:47

1 respuesta 1

2

Tu error es simple. Los valores iniciales no están siendo asignados. De modo que cuando se compara por primera vez if(fondo != texto){...} debe entrar por false no importando que color asignes porque de momento texto es null.

La solución es asignarlos:

<script>
// Defino variables GLOBALES
var fondo = "#fff";
var texto = "#000";
// sigue el resto del código
</script>

He supuesto que inicialmente el texto es negro y el fondo blanco. Tomando un default usual.

Editado para ilustrar el uso de atributos asignados:

Otra opción es usar directamente los atributos actuales como mecanismo de control:

<script>
// ajuste inicial para fijar el color de fondo de modo que las 
// comparaciones funcionen, es equivalente a haberlo asignado a las
// variables globales
document.bgColor = "#fff";
document.fgColor = "#000";
// cambio en asignar color de fondo
function colorFondo(color) {
    if (document.fgColor != color){
        document.bgColor = color;
    }else{
         alert('no es posible seleccionar este color');
    }
}
// cambio en asignar color de texto
function colorTexto(color) {
    if (document.bgColor != color){
        document.fgColor = color;
    }else{
         alert('no es posible seleccionar este color');
    }
}
// sigue el código
</script>

Con este cambio no se necesitan las variables globales.

7
  • Si es verdad, me imagino que al ser globales pasa eso, ya que recien dentro de la funcion le agrego el valor.
    – GhostCoder
    Commented el 25 sept. 2020 a las 2:31
  • @SebaLagos Al declararlas sin valor contienen null. No tiene que ver con que sean globales.
    – quevedo
    Commented el 25 sept. 2020 a las 2:32
  • pero si te fijas, dentro de la funcion ya tienen el valor de color;
    – GhostCoder
    Commented el 25 sept. 2020 a las 2:35
  • Tiene el que entra, no el que tenía. Voy a ajustar el código para que sea evidente.
    – quevedo
    Commented el 25 sept. 2020 a las 2:37
  • En el ultimo que editaste sin variables globales, si te fijas cuando cargas la pagina y pinchas el color negro, no se ve el texto.
    – GhostCoder
    Commented el 25 sept. 2020 a las 3:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.