Change color according to text typed in Textbox

Question

Change color according to text typed in Textbox

Asked 6 years, 9 months ago

Viewed 273 times

0

Hello! I need a code that changes the background of some Textbox as soon as the page is loaded according to what was "taken" from the database, my idea would be as follows: the textbox has 2 possible values = "SENT" and "NOT SENT", the code changes the background to Green(SENT) or red(NOT SENT). I don’t know much about Javascript but I tried this and there was no success:

    <script type="text/javascript">

        function ChangeColor() {
        var cor = document.getElementById("cxtexto");
    if (cor == "ENVIADO")
        obj.style.backgroundColor = "#FF4D00";
    else
        obj.style.backgroundColor = "#0a719c";
}
    </script>

In a very short way my PHP/html page is as follows:

<html>
<body onload="ChangeColor()">
<head>
 **Aqui vem o Script citado acima**
</head>
<td>JANEIRO<input type='text' value='ENVIADO' id='cxtexto'></td>
<td>FEVEREIRO<input type='text' value='NAO ENVIADO' id='cxtexto'></td>
</body>
</html>

The VALUES above it pulls from the database (with PHP) but supposing they were described ai, how would it be? I couldn’t find but if there are any similar or similar questions, could you give me the link?

2 answers

Browser other questions tagged php javascript html css

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

by Sam • **79,597** points · Answer 1 · 2017-12-19T18:00:13+00:00

First thing is that you should not use the same id in more than one element. If you can, change id="cxtexto" for class="cxtexto" or add a class equal for the fields.

Then you can change the colors with document.querySelectorAll, traversing all the input text and checking the value:

(function ChangeColor() {
   var cor = document.querySelectorAll('input.cxtexto');
   
   for(var x=0; x<cor.length; x++){
      cor[x].style.backgroundColor = cor[x].value == "ENVIADO" ? "#090" : "#F30";
   }
}())

<td>JANEIRO<input type='text' value='ENVIADO' class='cxtexto'></td>
<td>FEVEREIRO<input type='text' value='NAO ENVIADO' class='cxtexto'></td>

by user60252 · Answer 2 · 2017-12-20T00:28:13+00:00

As already said, one should not use elements with same id in a document. But for my answer it matters little.

Já que está carregando a pagina de acordo com o que foi "pego" do banco de dados, I would let PHP take charge of giving colors to inputs according to the possible values returned, ie, "ENVIADO" e "NAO ENVIADO".

Assuming the table has the columns mes and estado with Mysqli would look like this:

$mysqli = new mysqli("localhost", "USUARIO", "SENHA", "NOME_DB");

$sql=("SELECT * FROM tabela");
$result = mysqli_query($mysqli,$sql);

while($fetch= mysqli_fetch_assoc($result)) {
    $corFundo = $fetch['estado'] == "ENVIADO" ? "#090" : "#F30";
    echo  "<td>".$fetch['mes']."<input type='text' value='".$fetch['estado']."' id='cxtexto' style='background-color: ".$corFundo."'></td>";
}