Change Javascript input color

Asked

Viewed 1,716 times

4

My question is this::

I’d like you to change the color of a input according to the value in the calculation made.

For example let’s assume that the value of input name="comparar" is 5 and the result of the calculation of input name="cor1" and of input name="cor2" be 4 which will be shown in input name="cor3"

In this case as the result was 4 less than 5 would change the color of input name="cor3" to red and if it were the other way around it would change the color of the input name="cor3" for green and if it was possible to change automatically cause a new calculation is made.

<html>
<head>
<title>CALCULO</title>
</head>
<body>

<script type="text/javascript">


    function COR() {
	   
	   var cor1 = eval(document.form.cor1.value);
	   var cor2 = eval(document.form.cor2.value);
	   
	   
	   cor3 = cor1+cor2
	   
	   
	   document.form.cor3.value = cor3;
	   
   }

</script>   

<form name="form" onmouseover="COR()">

<input name="comparar" width="50%" /><br /><br /><br />


<input name="cor1" width="50%" /><br />
<input name="cor2" width="50%" /><br /><br /><br />
<input name="cor3" width="50%" /><br />

</form>

</body>
</html>

javascript

2 answers

1

I think what you want is to manipulate the property document.form.cor3.className:

function cor() {
    var cor1 = parseInt(document.form.cor1.value) || 0;
    var cor2 = parseInt(document.form.cor2.value) || 0;
    var comp = parseInt(document.form.comparar.value) || 0;
    var cor3 = cor1 + cor2;
    document.form.cor3.value = cor3;
    document.form.cor3.className = cor3 < comp ? 'vermelho' : 'verde';
}
.vermelho {
    background-color: red;
}

.verde {
    background-color: green;
}
<form name="form" onmouseover="cor()">
    <input name="comparar" width="50%" /><br /><br /><br />
    <input name="cor1" width="50%" /><br />
    <input name="cor2" width="50%" /><br /><br /><br />
    <input name="cor3" width="50%" /><br />
</form>

1


Avoid the use of eval(), mainly in fields input. Any Javascript code typed in input will be executed by eval(). Use the parseInt() to convert the field value to number.

You can use the event oninput to call the function COR() when fields are modified. The function will check whether the sum result is a number (!isNaN) and apply the color in the last field according to the result.

<html>
<head>
<title>CALCULO</title>
</head>
<body>

<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function(){
   var inputs = document.querySelectorAll("form input");
   for(var x=0; x<inputs.length; x++) inputs[x].oninput = COR;
});


function COR() {

   var cor1 = parseInt(document.form.cor1.value);
   var cor2 = parseInt(document.form.cor2.value);
   
   
   var cor3 = cor1+cor2;
   var comp = document.form.comparar;
   var c3 = document.form.cor3;

   if(!isNaN(cor3)){
      c3.value = cor3;
      c3.style.background = cor3 < comp.value ? "red" : "green";
   }else{
      c3.value = '';
      c3.style.background = "white";
   }

}

</script>   

<form name="form">

<input name="comparar" width="50%" /><br /><br /><br />


<input name="cor1" width="50%" /><br />
<input name="cor2" width="50%" /><br /><br /><br />
<input name="cor3" width="50%" /><br />

</form>

</body>
</html>

  • Friend exactly what I wanted Thank you !!!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.