login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[JS]Divs zichtbaar maken

Offline stenno - 07/08/2005 11:35 (laatste wijziging 07/08/2005 12:49)
Avatar van stennoPHP interesse Heej beste sitemasters.

Ik heb een script nodig.
Dat script moet na het invullen van 2 variablen en een klik op de search button alle onzichtbare div's (<div style='display:none'
id='idname'>variable_1<br>variable_2</div>) die 2 lagere variablen
bevatten dan de 2 ingevulde variablen zichtbaar maken.

ik hoop dat dit duidelijk genoeg is. ik zal in de komende dagen deze topic bijwerken om het duidelijker te laten worden.

kan iemand een voorbeeldscript maken??

16 antwoorden

Gesponsorde links
Offline Scott - 07/08/2005 12:24
Avatar van Scott Gouden medaille

PHP ver gevorderde		 document.getElementById('idname').style.display = 'block;
Offline stenno - 07/08/2005 12:36 (laatste wijziging 07/08/2005 21:02)
Avatar van stenno PHP interesse Ja ok dat snap ik maar hoe krijg je die lager dan goed in de functie
Offline haytjes - 07/08/2005 22:38 (laatste wijziging 07/08/2005 22:40)
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 neem vooral de code eens goed door
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. function tonen()
  3. {
  4. 	y = document.getElementsByTagName('div').length;
  5. 	for(x=0;x<y;x++)
  6. 	{
  7. 		if(document.getElementsById('div')[x].style.display == 'none')
  8. 			document.getElementsById('div')[x].style.display = 'block';
  9. 	}
  10. }
  11. </script>


voor die replace: link
Offline stenno - 16/08/2005 19:25 (laatste wijziging 16/08/2005 21:17)
Avatar van stenno PHP interesse Ok ik heb nu ruim 1 week gescript en die code bestudeerd maar ik kom er maar niet uit ik heb ook nog for en while lus tutorials gedaan maar dat hielp ook niet.

kan iemand (haytjes) misschien meer uitleg geven of helpen. Als ik maar een voorbeeld heb van 2/3 div's dan kan ik de rest zelf wel.

ik heb nu dit:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script>
  5. function tonen()
  6. {
  7.     y = document.getElementsByTagName('div').length;
  8.     for(x=0;x<y;x++)
  9.     {
  10.         if(document.getElementsById('div')[x].style.display == 'none')
  11.             document.getElementsById('div')[x].style.display = 'block';
  12.     }
  13. }
  14. </script>
  15. </head>
  16. <body>
  17.  
  18. <form name="form1">
  19. <center><table border="3" style="border-collapse:collapse;" cellspacing="0" cellpadding="5" width="700">
  20.  
  21. <tr>
  22. <th align="center" valign="middle" height="30" Colspan="4"><font size="4">Put your stats below:</font></th>
  23. </tr> 
  24.  
  25. <tr>
  26. <td align="center" width="25%">Total Fightingforce:</td>
  27. <td align="center" width="25%"><input type="text" name="as" size="15"button value="0"></td>
  28. <td align="center" width="25%">Strike action:</td>
  29. <td align="center" width="25%"><input type="text" name="sa" size="15"button value="0"></td>
  30.  
  31. </tr>
  32.  
  33. </Table></center><BR>
  34.  
  35. <center><table>
  36.  
  37. <tr>
  38. <td><input type="reset" name="reset" value="Reset" /></td>
  39. <td><button onclick="Search(this.form)" type="button ">Search</button></td>
  40. </tr>
  41.  
  42. </table></center><BR>
  43.  
  44. <!-- hier dan div 1 plaatsen. --> 
  45. <!-- hier dan div 2 plaatsen. --> 
  46. <!-- hier dan div 3 plaatsen. --> 
  47.  
  48. <!-- die div's moeten alleen zichtbaar gemaakt worden als de
  49. 1e ingevulde waarde lager is en de 2e ingevulde waarde hoger is dan de waardes die de div's bevatten. -->
  50.  
  51. </form>
  52.  
  53. </body>
  54. </html>


alvast heel erg bedankt.
Offline haytjes - 17/08/2005 09:58 (laatste wijziging 17/08/2005 10:07)
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 bij jou script ingepast: ('k heb het aangepast, omdat ik dacht dat je anders bedoelde)
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script>
  5. var divs = Array('iddiv1','iddiv2','iddiv3');
  6.  
  7. function tonen(getal, getal2)
  8. {
  9.     y = divs.length;
  10.     for(x=0;x<y;x++)
  11.     {
  12.         if(document.getElementsById('div')[x].innerText < getal && document.getElementsById('div')[x].innerText > getal2)
  13.             document.getElementsById('div')[x].style.display = 'block';
  14.         else
  15.             document.getElementsById('div')[x].style.display = 'none';
  16.     }
  17. }
  18. function Search(this.form)
  19. {
  20.       tonen(// hier nog het juiste getal inzetten, // hier nog het juiste getal inzetten);
  21. }
  22. </script>
  23. </head>
  24. <body>
  25.  
  26. <form name="form1">
  27. <center><table border="3" style="border-collapse:collapse;" cellspacing="0" cellpadding="5" width="700">
  28.  
  29. <tr>
  30. <th align="center" valign="middle" height="30" Colspan="4"><font size="4">Put your stats below:</font></th>
  31. </tr> 
  32.  
  33. <tr>
  34. <td align="center" width="25%">Total Fightingforce:</td>
  35. <td align="center" width="25%"><input type="text" name="as" size="15"button value="0"></td>
  36. <td align="center" width="25%">Strike action:</td>
  37. <td align="center" width="25%"><input type="text" name="sa" size="15"button value="0"></td>
  38.  
  39. </tr>
  40.  
  41. </Table></center><BR>
  42.  
  43. <center><table>
  44.  
  45. <tr>
  46. <td><input type="reset" name="reset" value="Reset" /></td>
  47. <td><button onclick="Search(this.form)" type="button ">Search</button></td>
  48. </tr>
  49.  
  50. </table></center><BR>
  51.  
  52. <div style='display:none' id='iddiv1'>1</div>
  53. <div style='display:none' id='iddiv2'>2</div>
  54. <div style='display:none' id='iddiv3'>3</div>
  55.  
  56. <!-- die div's moeten alleen zichtbaar gemaakt worden als de
  57. 1e ingevulde waarde lager is en de 2e ingevulde waarde hoger is dan de waardes die de div's bevatten. -->
  58.  
  59. </form>
  60.  
  61. </body>
  62. </html>
Offline stenno - 17/08/2005 12:42
Avatar van stenno PHP interesse
Ok dit ziet er goed uit maar als ik het in mijn htmlkit zet geeft hij een error: "regel 20 teken 17 wordt ID verwacht"

Alvast heel erg bedankt vooral Haytjes !!
Offline haytjes - 17/08/2005 13:07
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 klein foutje:
getElementsById
moet
getElementById
zijn
(s wegdoen)

sorry had er niet aan gedacht...
Offline stenno - 17/08/2005 15:16 (laatste wijziging 17/08/2005 17:27)
Avatar van stenno PHP interesse
Ok ik heb dat veranderd maar nog steeds dezelfde error: "regel 20 teken 17 ID wordt verwacht."

Ik heb nu dit maar ik snap echt niet waarom hij het niet doet


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5. <title>Untitled</title>
  6. <script language="JavaScript" type="text/javascript">
  7. <!--
  8. var divs = Array('iddiv1','iddiv2','iddiv3');
  9.  
  10. function tonen(getal, getal2)
  11. {
  12.     y = divs.length;
  13.     for(x=0;x<y;x++)
  14.     {
  15.         if(document.getElementById('div')[x].innerText < getal && document.getElementById('div')[x].innerText > getal2)
  16.             document.getElementById('div')[x].style.display = 'block';
  17.         else
  18.             document.getElementById('div')[x].style.display = 'none';
  19.     }
  20. }
  21. function Search(this.form)
  22. {
  23.       tonen(parsefloat(document.form1.as), parsefloat(document.form1.as));
  24. }
  25. -->
  26. </script>
  27. </head>
  28. <body>
  29.  
  30. <form name="form1">
  31. <center><table border="3" style="border-collapse:collapse;" cellspacing="0" cellpadding="5" width="700">
  32.  
  33. <tr>
  34. <th align="center" valign="middle" height="30" Colspan="4"><font size="4">Put your stats below:</font></th>
  35. </tr> 
  36.  
  37. <tr>
  38. <td align="center" width="25%">Total Fightingforce:</td>
  39. <td align="center" width="25%"><input type="text" name="as" size="15"button value="0"></td>
  40. <td align="center" width="25%">Strike action:</td>
  41. <td align="center" width="25%"><input type="text" name="sa" size="15"button value="0"></td>
  42.  
  43. </tr>
  44.  
  45. </Table></center><BR>
  46.  
  47. <center><table>
  48.  
  49. <tr>
  50. <td><input type="reset" name="reset" value="Reset" /></td>
  51. <td><button onclick="Search(this.form)" type="button ">Search</button></td>
  52. </tr>
  53.  
  54. </table></center><BR>
  55.  
  56. <div style='display:none' id='iddiv1'>1</div>
  57. <div style='display:none' id='iddiv2'>2</div>
  58. <div style='display:none' id='iddiv3'>3</div>
  59.  
  60. <!-- die div's moeten alleen zichtbaar gemaakt worden als de
  61. 1e ingevulde waarde lager is en de 2e ingevulde waarde hoger is dan de waardes die de div's bevatten. -->
  62.  
  63. </form>
  64.  
  65. </body>
  66. </html>
Offline haytjes - 17/08/2005 17:40 (laatste wijziging 17/08/2005 17:41)
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 'k zit hier de ene fout achter de andere aan het maken,

getElementById('div')[x]
moet
getElementById('div')
zijn

// 'k hoop dat er niet nog meer fouten in zitten:$
Offline stenno - 17/08/2005 17:41 (laatste wijziging 17/08/2005 17:46)
Avatar van stenno PHP interesse ok ik ga het weer proberen 

edit: ik ben bang van wel  De error bij het unloaden van de pagina is verwerkt. Maar er komt een andere bij. bij het drukken op de search button komt de error:"Regel 21 is geen object wordt verwacht."

Ps. dit heb ik nu:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script language="JavaScript" type="text/javascript">
  5. <!--
  6. var divs = Array('iddiv1','iddiv2','iddiv3');
  7.  
  8. function tonen(getal, getal2)
  9. {
  10.     y = divs.length;
  11.     for(x=0;x<y;x++)
  12.     {
  13.         if(document.getElementById('div').innerText < getal && document.getElementById('div')[x].innerText > getal2)
  14.             document.getElementById('div').style.display = 'block';
  15.         else
  16.             document.getElementById('div').style.display = 'none';
  17.     }
  18. }
  19. function Search1()
  20. {
  21.       tonen(parsefloat(document.form1.as), parsefloat(document.form1.as));
  22. }
  23. -->
  24. </script>
  25. </head>
  26. <body>
  27.  
  28. <form name="form1">
  29. <center><table border="3" style="border-collapse:collapse;" cellspacing="0" cellpadding="5" width="700">
  30.  
  31. <tr>
  32. <th align="center" valign="middle" height="30" Colspan="4"><font size="4">Put your stats below:</font></th>
  33. </tr> 
  34.  
  35. <tr>
  36. <td align="center" width="25%">Total Fightingforce:</td>
  37. <td align="center" width="25%"><input type="text" name="as" size="15"button value="0"></td>
  38. <td align="center" width="25%">Strike action:</td>
  39. <td align="center" width="25%"><input type="text" name="sa" size="15"button value="0"></td>
  40.  
  41. </tr>
  42.  
  43. </Table></center><BR>
  44.  
  45. <center><table>
  46.  
  47. <tr>
  48. <td><input type="reset" name="reset" value="Reset" /></td>
  49. <td><button onclick="Search1()" type="button ">Search</button></td>
  50. </tr>
  51.  
  52. </table></center><BR>
  53.  
  54. <div style='display:none' id='iddiv1'>1</div>
  55. <div style='display:none' id='iddiv2'>2</div>
  56. <div style='display:none' id='iddiv3'>3</div>
  57.  
  58. <!-- die div's moeten alleen zichtbaar gemaakt worden als de
  59. 1e ingevulde waarde lager is en de 2e ingevulde waarde hoger is dan de waardes die de div's bevatten. -->
  60.  
  61. </form>
  62.  
  63. </body>
  64. </html>



Maar wel heel erg bedankt
Offline haytjes - 17/08/2005 17:47
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 getElementById(divs[x])

op hoop van zegen
Offline stenno - 17/08/2005 17:53 (laatste wijziging 17/08/2005 17:56)
Avatar van stenno PHP interesse De error bij het unloaden van de pagina is verwerkt. Maar er komt een andere bij. bij het drukken op de search button gebeurt er helemaal niet.

Ps. dit heb ik nu:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script language="JavaScript" type="text/javascript">
  5. <!--
  6. var divs = Array('iddiv1','iddiv2','iddiv3');
  7.  
  8. function Search1()
  9. {
  10.     y = divs.length;
  11.     for(x=0;x<y;x++)
  12.     {
  13.         if(document.getElementById(divs[x]).innerText < parsefloat(document.form1.as) && document.getElementById(divs[x]).innerText > parsefloat(document.form1.sa))
  14.             document.getElementById(divs[x]).style.display = 'block';
  15.         else
  16.             document.getElementById(divs[x]).style.display = 'none';
  17.     }
  18. }
  19. -->
  20. </script>
  21. </head>
  22. <body>
  23.  
  24. <form name="form1">
  25. <center><table border="3" style="border-collapse:collapse;" cellspacing="0" cellpadding="5" width="700">
  26.  
  27. <tr>
  28. <th align="center" valign="middle" height="30" Colspan="4"><font size="4">Put your stats below:</font></th>
  29. </tr> 
  30.  
  31. <tr>
  32. <td align="center" width="25%">Total Fightingforce:</td>
  33. <td align="center" width="25%"><input type="text" name="as" size="15"button value="0"></td>
  34. <td align="center" width="25%">Strike action:</td>
  35. <td align="center" width="25%"><input type="text" name="sa" size="15"button value="0"></td>
  36.  
  37. </tr>
  38.  
  39. </Table></center><BR>
  40.  
  41. <center><table>
  42.  
  43. <tr>
  44. <td><input type="reset" name="reset" value="Reset" /></td>
  45. <td><button onclick="Search1()" type="button ">Search</button></td>
  46. </tr>
  47.  
  48. </table></center><BR>
  49.  
  50. <div style='display:none' id='iddiv1'>1</div>
  51. <div style='display:none' id='iddiv2'>2</div>
  52. <div style='display:none' id='iddiv3'>3</div>
  53.  
  54. <!-- die div's moeten alleen zichtbaar gemaakt worden als de
  55. 1e ingevulde waarde lager is en de 2e ingevulde waarde hoger is dan de waardes die de div's bevatten. -->
  56.  
  57. </form>
  58.  
  59. </body>
  60. </html>
Offline haytjes - 17/08/2005 18:18 (laatste wijziging 17/08/2005 18:19)
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 Ik heb ten 1ste nog een paar opmerkingen:
button: <input type='button' value='Submit'> (en niet <button type='button'>
textveld: <input type="text" name="as" size="15" value="0"> (en niet <input type="text" name="as" size="15"button value="0">)

parseFloat (en niet parsefloat)

voor de rest zat er ook nog een klein foutje in van mij (innerText werkte niet)

'k heb heb nu helemaal geprobt...
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script language="JavaScript" type="text/javascript">
  5. <!--
  6. var divs = Array('iddiv1','iddiv2','iddiv3');
  7.  
  8. function Search1()
  9. {
  10.     y = divs.length;
  11.     for(x=0;x<y;x++)
  12.     {
  13. 	if(parseFloat(document.getElementById(divs[x]).innerHTML) > parseFloat(document.form1.as.value) && parseFloat(document.getElementById(divs[x]).innerHTML) < parseFloat(document.form1.sa.value))
  14.             document.getElementById(divs[x]).style.display = 'block';
  15.         else
  16.             document.getElementById(divs[x]).style.display = 'none';
  17.     }
  18. }
  19. -->
  20. </script>
  21. </head>
  22. <body>
  23.  
  24. <form name="form1">
  25. <center><table border="3" style="border-collapse:collapse;" cellspacing="0" cellpadding="5" width="700">
  26.  
  27. <tr>
  28. <th align="center" valign="middle" height="30" Colspan="4"><font size="4">Put your stats below:</font></th>
  29. </tr> 
  30.  
  31. <tr>
  32. <td align="center" width="25%">Total Fightingforce:</td>
  33. <td align="center" width="25%"><input type="text" name="as" size="15" value="0"></td>
  34. <td align="center" width="25%">Strike action:</td>
  35. <td align="center" width="25%"><input type="text" name="sa" size="15" value="0"></td>
  36.  
  37. </tr>
  38.  
  39. </Table></center><BR>
  40.  
  41. <center><table>
  42.  
  43. <tr>
  44. <td><input type="reset" name="reset" value="Reset" /></td>
  45. <td><input onclick="Search1()" type="button" value='button'>Search</button></td>
  46. </tr>
  47.  
  48. </table></center><BR>
  49.  
  50. <div style='display:none' id='iddiv1'>1</div>
  51. <div style='display:none' id='iddiv2'>2</div>
  52. <div style='display:none' id='iddiv3'>3</div>
  53.  
  54. <!-- die div's moeten alleen zichtbaar gemaakt worden als de
  55. 1e ingevulde waarde lager is en de 2e ingevulde waarde hoger is dan de waardes die de div's bevatten. -->
  56.  
  57. </form>
  58.  
  59. </body>
  60. </html>
Offline stenno - 17/08/2005 18:34
Avatar van stenno PHP interesse
OKeej man het werkt heel erg bedankt !!! en ook bedankt voor de tips.

Het kan zijn dat ik het nog iets wil aanpassen. maar dat ga ik eerst een zelf uitproberen.

Heel erg bedankt ^^
Offline lasdesigner - 17/08/2005 21:43
Avatar van lasdesigner PHP beginner is het niet:
display: hidden; ?
Offline haytjes - 17/08/2005 21:45
Avatar van haytjes Gouden medailleGouden medaille

JS gevorderde		 nep,

het is display:none|block
en visibility:hidden|visible
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.252s