Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML] Zmiana koloru tła - jak to zrobić?
Forum PHP.pl > Forum > Przedszkole
davido
3.06.2014, 11:47:22
Witam

Proszę o pomoc w zmianie kodu
Chcę osiągnąć zmianę koloru tła w polu wyniku,
w zależności od przedziału np. od 0 do 100 kolor zielony, od 101 do 500 kolor czerwony, powyżej 500 kolor niebieski.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>wylicz</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  6. <script src="https://developer.mozilla.org/pl/docs/Web/JavaScript/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number/toFixed"></script>
  7.  
  8. <script type="text/javascript">
  9. //<![CDATA[
  10.  
  11. //]]>
  12. $('document').ready(function(){
  13. 	$('input').keyup(function(){
  14. 		 value = parseFloat($('#n1').val())*4
  15. 					 + parseFloat($('#n2').val())*8
  16. 					 + parseFloat($('#n3').val())*11;
  17.  
  18.  
  19.  
  20.  
  21. 		 $('#suma').html(value.toFixed(2));         
  22. 	});
  23. });
  24.  
  25. </script>
  26.  
  27. <script type="text/javascript">
  28.  
  29. function check(obj)
  30. {
  31.     var suma = obj.value;
  32.     if(suma >= 0 )
  33.     {
  34.         obj.style.backgroundColor="green";
  35.     } 
  36.     else if(suma > 100 < 500 )
  37.     {
  38.         obj.style.backgroundColor="red";
  39.     }
  40.     else if(suma <=501 )
  41.     {
  42.         obj.style.backgroundColor="blue";
  43.     }
  44. }
  45. </script>
  46. </head>
  47.  
  48. <body>
  49.  
  50. <table align="center" border="1" cellpadding="0" cellspacing="0" style="width:400px">
  51. <tr>
  52. <th> aaa </th><th> bbb </th>  <th> ccc </th> <th>ddd</th>
  53. </tr>
  54. <tr> 
  55. 	<td align="center" >adc</td>	<td align="center"  >fff</td> <td align="center" width="50px" >ggg</td> <td align="center" > <input id='n1' type='text' size="1"  maxlength="3" value='0'></td>
  56. </tr>
  57. <tr>
  58. 	<td align="center">aas</td>	<td align="center">ccd</td><td align="center">ggg</td> <td align="center"><input id='n2' type='text' size="1" value='0'></td>
  59. </tr>
  60. <tr>
  61. 	<td align="center">ghj</td>	<td align="center">tgt</td><td align="center">hhh</td> <td align="center"><input id='n3' type='text'size="1" value='0'></td>
  62. </tr>
  63. <tr>
  64. <td align="center"  > <big>razem</big> </td> <td  align="center" ><span id='suma' onkeyup="check(this);" maxlength="6"></span></td>
  65.  
  66. </tr>
  67.  
  68.  
  69.  
  70. </body>
  71. </html>
[HTML] pobierz, plaintext
johny_s
3.06.2014, 12:48:34
span nie obsługuje zdarzenia onkeyup
PrinceOfPersia
3.06.2014, 13:34:04
główny problem jest w tym, że masz zabałaganiony kod.

to jest do wywalenia, przez pomyłkę ci się musiało dodać:
Cytat
<script src="https://developer.mozilla.org/pl/docs/Web/JavaScript/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number/toFixed"></script>


onkeyup na tym spanie co masz, jest totalnie bez sensu. key(klawisz) up(do góry, odciśnięty). wywal to, funkcje check mozesz wywolac inaczej.

w warunkach funkcji check masz iles bledow, to raczej tak powinno byc:
[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript">
  2. //<![CDATA[
  3.  
  4. //]]>
  5. $('document').ready(function(){
  6.     $('input').keyup(function(){
  7.  
  8.          value = parseFloat($('#n1').val())*4
  9.                      + parseFloat($('#n2').val())*8
  10.                      + parseFloat($('#n3').val())*11;
  11.  
  12.  
  13.  
  14.         check(this, value); // WYWOLUJEMY FUNKCJE CHECK!!!!!
  15.          $('#suma').html(value.toFixed(2));         
  16.     });
  17. });
  18.  
  19. </script>
  20.  
  21. <script type="text/javascript">
  22.  
  23. function check(obj, value)
  24. {
  25.     var suma = value;
  26.     if(suma >= 0 && suma <= 100)
  27.     {
  28.         obj.style.backgroundColor="green";
  29.     } 
  30.     else if(suma > 100 && suma < 500 )
  31.     {
  32.         obj.style.backgroundColor="red";
  33.     }
  34.     else if(suma >=501 )
  35.     {
  36.         obj.style.backgroundColor="blue";
  37.     }
  38. }
  39. </script>
  40.  
  41.  
[JAVASCRIPT] pobierz, plaintext
davido
3.06.2014, 15:11:21
Dzięki za zainteresowanie

Wprowadziłem zmiany
ale efekt, jest nie taki jakiego oczekuje.
Zmieniają się kolory w input n1 ,n2 ,n3
a ja chcę zmienić kolor w wyniku span id="suma"
PrinceOfPersia
3.06.2014, 16:32:48
musisz tak zrobic, zeby argument "obj" w funkcji "check" wskazywal z powrotem na element span.
czyli zamiast this, podajesz $("$suma")[0] :
[JAVASCRIPT] pobierz, plaintext 
  1. check($('#suma')[0], value);
[JAVASCRIPT] pobierz, plaintext

(dlatego [0] w nawiasach zeby zamienic obiekt jQuery na zwykly element DOM, czyli odwolujesz sie do zerowego indeksu tego co jQuery zwraca)
davido
3.06.2014, 20:27:13
O to chodziło biggrin.gif
Wielkie dzięki
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.