The easiest thing is that when loading the web (completely) call the function with the method:
window.addEventListener('DOMContentLoaded',function(){});
Here's the example below:
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>
Or even easier with ES6 | Parameters for defects
I explain the code in the same code (forgive the redundancy) ..
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>
How do I make the if / else if and turn it into default?
You only need to change the paramatro of the change function () , in this way (I'll explain in the same code)
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>
Why is it blue? because if you set the parameter of the function change (), I left it by default in 10 and 10 meets the condition of:
if (circulo <= 10) d.style.backgroundColor = "blue";
or "If the" circle "parameter is less than or equal to 10, the
"blue" background color to element d (which is the div)