How to change the colors of Notes using javascript according to the result

Asked

Viewed 440 times

-2

I have a database where I insert my students' grades. But I would like these notes to be shown in the virtual bulletin as follows:

Banknotes from 0 to 25 = Red

Banknotes from 26 to 50 = Yellow

Banknotes 51 to 75 = Blue

Banknotes 76 to 100 = Green

When the student enters his virtual bulletin, he will have his notes with colors upon his performance.

But I have no idea how to perform such a task.

If friends can give me a tip on how to proceed, or even where I can learn how to do

I do not know if I have been able to make myself understood, but I am willing to clarify any doubts.

javascript css

  • You will build a table dynamically with php for data display?

  • Independent of PHP or Javascript, this with logic would solve, comparing the value and, in a list, display the color

  • 1

    Just like @Williamasimiliar said, the logic is this. Compare the value and assign a css class to the element that will encompass the note.

  • Murilo, did any of the answers solve your problem?

3 answers

3

Create a function that gives you this information and at the time of generating raisins the note value and the function returns color.

Something like that:

function getScoreColor(nr) {
    if (nr < 26) return 'red';
    if (nr < 51) return 'yellow';
    if (nr < 76) return 'lightblue';
    return 'green';
}


var notas = [10, 30, 40, 50, 60, 70, 80, 100];
var linhas = notas.forEach(function(nota){
	var p = document.createElement('p');
	p.style.backgroundColor = getScoreColor(nota);
	p.innerHTML = 'A sua nota foi ' + nota;
	document.body.appendChild(p);
});

jsFiddle: https://jsfiddle.net/qqmmexff/

1


Notes will always be integer numbers?

If you prefer to use jQuery, below is a simple example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>each demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div class="nota" id="x"><h1><b>1,3</b</h1></div><br/>
<div class="nota"><h1><b>25</b</h1></div><br/>
<div class="nota"><h1><b>2.3</b</h1></div><br/>

<div class="nota"><h1><b>26</b</h1></div><br/>
<div class="nota"><h1><b>51</b</h1></div><br/>
<div class="nota"><h1><b>100</b</h1></div><br/>

<script>

var nota;
$( "div.nota" ).each(function( index ) {
    nota = parseInt( $( this ).text(), 10 );

    if(nota >= 0 && nota <= 25)
        $(this).css('color', 'red');
    else if(nota >= 26 && nota <= 50)
        $(this).css('color', 'yellow');
    else if(nota >= 51 && nota <= 75)
        $(this).css('color', 'blue');
    else if(nota >= 76 && nota <= 100)
        $(this).css('color', 'green');
}
);
</script>

</body>
</html>

  • Thanks @Rafael Sobreira Braga, your tip worked like a glove.

  • @Murilo Cabral, I’m happy to help you. Abs.

0

After your form is uploaded, at the event window onload., you can put a function that iterates Labels (or inputs) and changes the content color according to the value. Frizando that in this case is the function should be invoked after the DOM is fully assembled:

var labels =  document.getElementById("notas").parentNode.getElementsByTagName("label");
for (var i = 0; i < labels.length; i++) {
  
  var valor = labels[i].innerHTML;

  if (valor >= '0' && valor <= '26')
    labels[i].className = "vermelho";
  if (valor >= '26' && valor <= '50')
    labels[i].className = "amarelo";
  if (valor >= '51' && valor <= '75')
    labels[i].className = "azul";
  if (valor >= '76' && valor <= '100')
    labels[i].className = "verde";
  
};
.vermelho {
  color: red;
}
.amarelo {
  color: yellow;
}
.azul {
  color: blue;
}
.verde {
  color: green;
}
<table id="notas">
  <label>20</label>
  <br/>
  <label>30</label>
  <br/>
  <label>60</label>
  <br/>
  <label>80</label>
</table>

Browser other questions tagged javascript css

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