0

Estoy tratando de cambiar el color de un div con una funcion en javascript, pero ahora quiero que al momento de cargar la pagina ya tenga ese dicho color, segun un valor ya definido en la funcion, sin la necesidad de un input, pero no lo he logrado espero que puedan ayudarme.

function cambio(circulo){
        circulo = "30";
        if ($(circulo).val() <= "10") {
            document.getElementById("circulo").style.backgroundColor = "#c0392b";
        }else if ($(circulo).val() <= "20") {
            document.getElementById("circulo").style.backgroundColor = "yellow";
        }else if ($(circulo).val() <= "30") {
            document.getElementById("circulo").style.backgroundColor = "orange";
        }else if ($(circulo).val() <= "40") {
            document.getElementById("circulo").style.backgroundColor = "#2d792d";
        }else if ($(circulo).val() <= "50") {
            document.getElementById("circulo").style.backgroundColor = "#04ad04";
        }
    } 

codigo html:

<input type="text" onchange="cambio(this)" id="example" name="example" autofocus="autofocus" />

2 respuestas 2

2

Tu problema es que la función cambio solo se ejecuta cuando se detecta que el valor de tu input ha cambiado, por lo cual necesitarías una nueva función la cual se ejecute inmediatamente cargue la página, debes hacer algo así:

var valor = 10;
    
        function initial(){
          document.getElementById("example").value = valor;
    
          if (valor <= "10") {
                document.getElementById("circulo").style.backgroundColor = "#c0392b";
            }else if (valor <= "20") {
                document.getElementById("circulo").style.backgroundColor = "yellow";
            }else if (valor <= "30") {
                document.getElementById("circulo").style.backgroundColor = "orange";
            }else if (valor <= "40") {
                document.getElementById("circulo").style.backgroundColor = "#2d792d";
            }else if (valor <= "50") {
                document.getElementById("circulo").style.backgroundColor = "#04ad04";
            }
        }
    
        initial();
    
        function cambio(circulo){        
            if (circulo.value <= "10") {
                document.getElementById("circulo").style.backgroundColor = "#c0392b";
            }else if (circulo.value <= "20") {
                document.getElementById("circulo").style.backgroundColor = "yellow";
            }else if (circulo.value <= "30") {
                document.getElementById("circulo").style.backgroundColor = "orange";
            }else if (circulo.value <= "40") {
                document.getElementById("circulo").style.backgroundColor = "#2d792d";
            }else if (circulo.value <= "50") {
                document.getElementById("circulo").style.backgroundColor = "#04ad04";
            }
        } 
<input type="text" onchange="cambio(this)" id="example" name="example" autofocus="autofocus" value="0" />
      <div id="circulo" style="width: 50px; height: 50px;"></div>

Espero que te sirva, saludos !

3
  • me da error en la parte de "document.getElementById("example").value = valor;" sale este error: Uncaught TypeError: Cannot set property 'value' of null at initial espero y puedas ayudarme. el 3 oct. 2017 a las 22:42
  • Revisa que el id de el input este exactamente igual al del selector el 3 oct. 2017 a las 22:48
  • muchas gracias Camilo ya me funciono. el 3 oct. 2017 a las 23:16
1

Lo más fácil es que al cargar la web(completamente) llames a la función con el método:

window.addEventListener('DOMContentLoaded',function(){});

Te dejo el ejemplo aquí abajo:

function cambio(circulo){
        circulo = "30";
        if ($(circulo).val() <= "10") {
            document.getElementById("circulo").style.backgroundColor = "#c0392b";
        }else if ($(circulo).val() <= "20") {
            document.getElementById("circulo").style.backgroundColor = "yellow";
        }else if ($(circulo).val() <= "30") {
            document.getElementById("circulo").style.backgroundColor = "orange";
        }else if ($(circulo).val() <= "40") {
            document.getElementById("circulo").style.backgroundColor = "#2d792d";
        }else if ($(circulo).val() <= "50") {
            document.getElementById("circulo").style.backgroundColor = "#04ad04";
        }
        else {
          document.getElementById("circulo").style.backgroundColor = "lightpink";
        }
    } 

/* Cuando la web carga, se llama a la función cambio() , pasandole como parámetro algun numero que no este entre tus if/else if , entonces solamente se cumplira el else de la funcion cambio() , y ahí especifiqué el color "lightpink" que es rosado claro */
window.addEventListener('DOMContentLoaded', () => { 
  cambio(0) // Llamo a la función cambio()
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<input type="text" onchange="cambio(this)" id="example" name="example" autofocus="autofocus" /> 
<div id="circulo" style="background-color: rgba(40,40,40,0); width: 150px; height: 150px;"></div>

  </body>
</html>

O aún mas fácil con ES6 | Parámetros por defectos

Te explico el código en el mismo código(valga la redundancia)..

function cambio(circulo = 'cualquier cosa'){ // PARAMETRO POR DEFECTO
        if ($(circulo).val() <= "10") {
            document.getElementById("circulo").style.backgroundColor = "#c0392b";
        }else if ($(circulo).val() <= "20") {
            document.getElementById("circulo").style.backgroundColor = "yellow";
        }else if ($(circulo).val() <= "30") {
            document.getElementById("circulo").style.backgroundColor = "orange";
        }else if ($(circulo).val() <= "40") {
            document.getElementById("circulo").style.backgroundColor = "#2d792d";
        }else if ($(circulo).val() <= "50") {
            document.getElementById("circulo").style.backgroundColor = "#04ad04";
        }
        else {
          document.getElementById("circulo").style.backgroundColor = "lightpink";
        }
    } 

/* Cuando la web carga, se llama a la función cambio(), sin parámetro y en la función si el parámetro no esta definido tomará por defecto "cualquier cosa" , esa string no cumple con ningún if/ else if, solamente con el else, entonces eso se ejecutará.*/
window.addEventListener('DOMContentLoaded', () => { 
  cambio() // Llamo a la función cambio()
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<input type="text" onchange="cambio(this)" id="example" name="example" autofocus="autofocus" /> 
<div id="circulo" style="background-color: rgba(40,40,40,0); width: 150px; height: 150px;"></div>

  </body>
</html>

¿Cómo hago para que sí cumpla el if/else if y a su vez sea en defecto?

Solo debes cambiar el paramatro de la función cambio(), de esta forma(te explicare en el mismo código)

function cambio(circulo = 10){ // AQUI CAMBIAS EL PARAMÁTRO POR DEFECTO, PARA QUE CUMPLA UNA DE LAS CONDICIONES QUE HAS ESCRITO POR EJEMPLO QUE SEA <= 10 o sino puedes cambiar los condiciones envez de hacer $(circulo).val() <- que te dá el valor del input, puedes directamente pedir el parámetro y te quedará:
        var d = document.getElementById("circulo");
        if (circulo <= 10) d.style.backgroundColor = "blue";
        else if (circulo <= 20) d.style.backgroundColor = "orange";   
    } 

/* Cuando la web carga, se llama a la función cambio(), sin parámetro y en la función si el parámetro no esta definido tomará por defecto "cualquier cosa" , esa string no cumple con ningún if/ else if, solamente con el else, entonces eso se ejecutará.*/
window.addEventListener('DOMContentLoaded', () => { 
  cambio() // Llamo a la función cambio()
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<input type="text" onchange="cambio(this)" id="example" name="example" autofocus="autofocus" /> 
<div id="circulo" style="background-color: rgba(40,40,40,0); width: 150px; height: 150px;"></div>

  </body>
</html>

Por qué queda en azul ? porque si te fijas el parámetro de la función cambio() , lo dejé por defecto en 10 y 10 cumple la condición de:

 if (circulo <= 10) d.style.backgroundColor = "blue";

o "Si el parámetro "circulo" es menor o igual que 10 , le aplicará el color de fondo "azul" al elemento d(que es el div)

5
  • Entonces como le haria para que se cumpla uno de los if/else if dandole un valor definido para ya no tener que utilizar input. el 3 oct. 2017 a las 22:53
  • Pues según las condiciones que hayas realizados, te dejaré otro ejemplo
    – ESCM
    el 3 oct. 2017 a las 22:54
  • Ya está editado Julio Cesar
    – ESCM
    el 3 oct. 2017 a las 23:00
  • Muchas Gracias!!! Eduardo Sebastian, si me funciono. el 3 oct. 2017 a las 23:09
  • De nada Julio Cesar !!
    – ESCM
    el 3 oct. 2017 a las 23:12

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.