Change the color of the Javascript input

Question

Change the color of the Javascript input

Navigation

#1 by (1 votes)
#2 by (1 votes)

4

My question is:

I would like 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 calculating input name="cor1" and input name="cor2" is 4 that will be shown in input name="cor3"

In this case as the result was 4 less than 5 would change the color from input name="cor3" to red and if it were to the contrary would change the color from input name="cor3" to green and if it were 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

asked by anonymous 03.10.2018 / 20:38

2 answers

1

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

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>

03.10.2018 / 20:53

Format Array display in C #? Formatting Time using initBinder

score 1 · Accepted Answer

Avoid using eval() , especially in input fields. Any JavaScript code entered in input will be executed by eval() . Use parseInt() to convert field value to number.

You can use the oninput event to call the COR() function when the fields are modified. The function will check if the result of the sum 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>