How to change the colors of Notes using javascript according to the result [closed]

Navigation
-2

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

Notes from 0 to 25 = Red

Notes from 26 to 50 = Yellow

Notes from 51 to 75 = Blue

Notes from 76 to 100 = Green

When the student enters your newsletter, you will have your color notes on performance.

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

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

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

    
asked by anonymous 18.11.2016 / 14:08

3 answers

1

Will the notes always be integers?

If you prefer to use jQuery, here 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><divclass="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>
    
18.11.2016 / 15:52
3

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

Something like this: 

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

    
18.11.2016 / 14:23
0

After your form loads, in the event window.onload , you you can place a function that iterates labels (or inputs) and changes the color of the content according to the value. Ferving that in this case the function should be invoked after the DOM is completely mounted: 

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>
    
18.11.2016 / 14:39
Calculator problems Javascipt [closed] Error in PHP code