5

Minha dúvida é a seguinte:

Gostaria que mudasse a cor de uma input de acordo com o valor no cálculo feito.

Por exemplo vamos supor que o valor da input name="comparar" seja 5 e o resultado do cálculo da input name="cor1" e da input name="cor2" seja 4 que será mostrado na input name="cor3"

Nesse caso como o resultado foi 4 menor que 5 mudaria a cor da input name="cor3" para vermelho e se fosse ao contrario mudaria a cor da input name="cor3" para verde e se fosse possível mudasse de forma automática causa seja feito um novo cálculo.

<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>

2 Respostas 2

1

Evite o uso de eval(), principalmente em campos input. Qualquer código JavaScript digitado no input será executado pelo eval(). Use o parseInt() para converter o valor do campo em número.

Você pode usar o evento oninput para chamar a função COR() quando os campos forem modificados. A função irá verificar se o resultado da soma é um número (!isNaN) e aplicar a cor no último campo de acordo com o resultado.

<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>

1
  • Amigo exatamente isso que queria Obrigado !!! Commented 3/10/2018 às 19:34
1

Acho que o que você quer é manipular a propriedade 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .