Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak przerobić kod?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
gandziorz
18.11.2011, 20:22:10
Witam,
Napisałem kod który dynamicznie wyświetla informacje po zmianie wyboru.
Wygląda on mniej więcej tak.

[PHP] pobierz, plaintext 
  1. <script>
  2. <!--
  3. //mozliwosci w option
  4. var oznaczenia = new Array('18NV','18SV','18SEH','E18 NVR','20SE','C20NE','C20NEF','C20NEJ','C26NE','30NE','C30LE','C30NE','C30SE','C30SEJ','C30XEI','C36GET','C40SE','23YD','23YDT','23DTR');
  5. var lata = new Array('1986-1987','1986-1987','1986-1992','1987-1990','1986-1987','1986-1993','b.d.','1990-1993','1990-1993','1986-1990','1986-1988','1990-1993','1989-1993','1986-1993','b.d.','b.d.','b.d.','1986-1993','1986-1988','1988-1993');
  6. var pojemnosc = new Array('1796','1796','1796','1796','1998','1998','1998','1998','2594','2969','2969','2969','2969','2969','3637','3983','2260','2260','2260');
  7. var cylindrow = new Array('4','4','4','4','4','4','4','4','6','6','6','6','6','6','6','6','6','4','4','4');
  8. var zawory = new Array('8','8','8','8','8','8','8','8','12','12','12','12','24','24','24','24','24','8','8','8');
  9. var zasilanie = new Array('gaźnik','gaźnik','Bosch L3 Jetronic','Pierburg 2EE','b.d.','Bosch Motronic ML4.1 oraz 1.5','b.d.','b.d.','Bosch Motronic 1.5','Bosch LE Jetronic','b.d.','Bosch Motronic ML4 oraz 1.5','Bosch Motronic 1.5','b.d.','b.d.','b.d.','b.d.','Bosch VE4','Bosch VE4','Bosch VE4');
  10. var rozrzad = new Array('OHC','OHC','OHC','OHC','OHC','OHC','OHC','OHC','CIH','CIH','CIH','CIH','DOHC','DOHC','DOHC','DOHC','DOHC','OHC','OHC','OHC');
  11. var sprezanie = new Array('9.2:1','10.0:1','10.0:1','9.2:1','10.0:1','9.2:1','9.2:1','9.2:1','9.2:1','9.4:1','8.6:1','9.2:1','10.0:1','10.0:1','10.5:1','8.2:1','10.0:1','23:01','23:01','23:01');
  12. var km = new Array('82 (60) @ 5400','90 (66) @ 5200','116 (85) @ 5600','88 (65) @ 5200','122 (90) @ 5400','116 (85) @ 5400','101 (74) @ 5200','99 (73) @ 5200','150 (110) @ 5600','177 (130) @ 5800','156 (115) @ 5400','177 (130) @ 5800','204 (150) @ 6000','200 (147) @ 6000','230 (169) @ 6700','377 (277) @ 5200','272 (200) @ 5800','73 (54) @ 4400','90 (66) @ 4200','101 (74) @ 4200');
  13. var nm = new Array('135 @ 3000','148 @ 3400','160 @ 4600','143 @ 3200','175 @ 2600','170 @ 2600','158 @ 2600','170 @ 2600','220 @ 3600','240 @ 4400','230 @ 3800','240 @ 4200','270 @ 3600','265 @ 3600','280 @ 3500','557 @ 4200','395 @ 3300','138 @ 2400','190 @ 2200','218 @ 2000');
  14. var srednica = new Array('84.4 x 79.5','84.4 x 79.5','84.4 x 79.5','84.4 x 79.5','86.0 x 86.0','86.0 x 86.0','86.0 x 86.0','86.0 x 86.0','88.8 x 69.8','95.0 x 69.8','95.0 x 69.8','95.0 x 69.8','95.0 x 69.8','95.0 x 69.8','95.0 x 69.8','95.3 x 85','98.0 x 88','92 x 85','92 x 85','92 x 85');
  15.  
  16. //-->
  17. </script>
  18. <select name="silnik" size="1" onChange="document.getElementById('oznaczenia').innerHTML=oznaczenia[this.getElementsByTagName('option')[this.selectedIndex].value];
  19. document.getElementById('lata').innerHTML=lata[this.getElementsByTagName('option')[this.selectedIndex].value];
  20. document.getElementById('pojemnosc').innerHTML=pojemnosc[this.getElementsByTagName('option')[this.selectedIndex].value];
  21. document.getElementById('cylindrow').innerHTML=cylindrow[this.getElementsByTagName('option')[this.selectedIndex].value];
  22. document.getElementById('zawory').innerHTML=zawory[this.getElementsByTagName('option')[this.selectedIndex].value];
  23. document.getElementById('zasilanie').innerHTML=zasilanie[this.getElementsByTagName('option')[this.selectedIndex].value];
  24. document.getElementById('rozrzad').innerHTML=rozrzad[this.getElementsByTagName('option')[this.selectedIndex].value];
  25. document.getElementById('sprezanie').innerHTML=sprezanie[this.getElementsByTagName('option')[this.selectedIndex].value];
  26. document.getElementById('km').innerHTML=km[this.getElementsByTagName('option')[this.selectedIndex].value];
  27. document.getElementById('nm').innerHTML=nm[this.getElementsByTagName('option')[this.selectedIndex].value];
  28. document.getElementById('srednica').innerHTML=srednica[this.getElementsByTagName('option')[this.selectedIndex].value];">
  29. <option selected>--WYBIERZ MODEL SILNIKA--</option>
  30. <option value="0">18NV</option>
  31. <option value="1">18SV</option>
  32. <option value="2">18SEH</option>
  33. <option value="3">E18 NVR</option>
  34. <option value="4">20SE</option>
  35. <option value="5">C20NE</option>
  36. <option value="6">C20NEF</option>
  37. <option value="7">C20NEJ</option>
  38. <option value="8">C26NE</option>
  39. <option value="9">30NE</option>
  40. <option value="10">C30LE</option>
  41. <option value="11">C30NE</option>
  42. <option value="12">C30SE</option>
  43. <option value="13">C30SEJ</option>
  44. <option value="14">C30XEI</option>
  45. <option value="15">C36GET</option>
  46. <option value="16">C40SE</option>
  47. <option value="17">23YD DIESEL</option>
  48. <option value="18">23YDT DIESEL</option>
  49. <option value="19">23DTR DIESEL</option>
  50. </select></br>
  51. Oznaczenie: <b id="oznaczenia"></b></br>
  52. Lata produkcji: <b id="lata"></b></br>
  53. Pojemność: <b id="pojemnosc"></b></br>
  54. Ilość cylindrów: <b id="cylindrow"></b></br>
  55. ILość zaworów: <b id="zawory"></b></br>
  56. Zasilanie: <b id="zasilanie"></b></br>
  57. Rozrząd: <b id="rozrzad"></b></br>
  58. Stopień sprężania: <b id="sprezanie"></b></br>
  59. Maks KM (kW)/RPM: <b id="km"></b></br>
  60. Maks Nm/RPM: <b id="nm"></b></br>
  61. Średnica × skok tłoka: <b id="srednica"></b></br>
  62.  
[PHP] pobierz, plaintext


Chciałbym jednak go zapisać do pliku *.js a na stronie wyświetlić tylko informację w postaci <script>nazwafunkcji()</script>. I w tym miejscu wyświetla się lista rozwijana i pozycje pod nią czyli "Oznaczenie: ....".
W JS jestem bardzo cienki. Pomoże ktoś?
gorden
18.11.2011, 21:13:35
linie 3-15 daj do tego pliku.js. usuń linie 2 i 16. linie 1 i 17 zamień w jedną, dodaj atrybut src="plik.js"
gandziorz
18.11.2011, 21:49:39
Cytat(gorden @ 18.11.2011, 21:13:35 ) *
linie 3-15 daj do tego pliku.js. usuń linie 2 i 16. linie 1 i 17 zamień w jedną, dodaj atrybut src="plik.js"

Nie rozumiesz mnie kolego.
Ja chce wszystko umieścić do *.js a na stronie jedynie wywołać całą listę wraz z opisem za pomocą <script>magicznafunkcja</script>.

Jak bym zrobił wg. twojego pomysłu na stronie dalej musiałbym wstawić:
[HTML] pobierz, plaintext 
  1. <select name="silnik" size="1" onChange="document.getElementById('oznaczenia').innerHTML=oznaczenia[this.getElementsByTagName('option')[this.selectedIndex].value];
  2. document.getElementById('lata').innerHTML=lata[this.getElementsByTagName('option')[this.selectedIndex].value];
  3. document.getElementById('pojemnosc').innerHTML=pojemnosc[this.getElementsByTagName('option')[this.selectedIndex].value];
  4. document.getElementById('cylindrow').innerHTML=cylindrow[this.getElementsByTagName('option')[this.selectedIndex].value];
  5. document.getElementById('zawory').innerHTML=zawory[this.getElementsByTagName('option')[this.selectedIndex].value];
  6. document.getElementById('zasilanie').innerHTML=zasilanie[this.getElementsByTagName('option')[this.selectedIndex].value];
  7. document.getElementById('rozrzad').innerHTML=rozrzad[this.getElementsByTagName('option')[this.selectedIndex].value];
  8. document.getElementById('sprezanie').innerHTML=sprezanie[this.getElementsByTagName('option')[this.selectedIndex].value];
  9. document.getElementById('km').innerHTML=km[this.getElementsByTagName('option')[this.selectedIndex].value];
  10. document.getElementById('nm').innerHTML=nm[this.getElementsByTagName('option')[this.selectedIndex].value];
  11. document.getElementById('srednica').innerHTML=srednica[this.getElementsByTagName('option')[this.selectedIndex].value];">
  12. <option selected>--WYBIERZ MODEL SILNIKA--</option>
  13. <option value="0">18NV</option>
  14. <option value="1">18SV</option>
  15. <option value="2">18SEH</option>
  16. <option value="3">E18 NVR</option>
  17. <option value="4">20SE</option>
  18. <option value="5">C20NE</option>
  19. <option value="6">C20NEF</option>
  20. <option value="7">C20NEJ</option>
  21. <option value="8">C26NE</option>
  22. <option value="9">30NE</option>
  23. <option value="10">C30LE</option>
  24. <option value="11">C30NE</option>
  25. <option value="12">C30SE</option>
  26. <option value="13">C30SEJ</option>
  27. <option value="14">C30XEI</option>
  28. <option value="15">C36GET</option>
  29. <option value="16">C40SE</option>
  30. <option value="17">23YD DIESEL</option>
  31. <option value="18">23YDT DIESEL</option>
  32. <option value="19">23DTR DIESEL</option>
  33. </select></br>
  34. Oznaczenie: <b id="oznaczenia"></b></br>
  35. Lata produkcji: <b id="lata"></b></br>
  36. Pojemność: <b id="pojemnosc"></b></br>
  37. Ilość cylindrów: <b id="cylindrow"></b></br>
  38. ILość zaworów: <b id="zawory"></b></br>
  39. Zasilanie: <b id="zasilanie"></b></br>
  40. Rozrząd: <b id="rozrzad"></b></br>
  41. Stopień sprężania: <b id="sprezanie"></b></br>
  42. Maks KM (kW)/RPM: <b id="km"></b></br>
  43. Maks Nm/RPM: <b id="nm"></b></br>
  44. Średnica × skok tłoka: <b id="srednica"></b></br>
[HTML] pobierz, plaintext


A tego chce uniknąć.
gorden
18.11.2011, 22:14:10
to dodaj na końcu pliku js document.write i cały ten html, daj backslashe do apostrofów/cudzysłowów i wszystko w funkcję. w head script src, gdzies w body <script>funkcja()</script>
gandziorz
18.11.2011, 22:24:58
Cytat(gorden @ 18.11.2011, 22:14:10 ) *
to dodaj na końcu pliku js document.write i cały ten html, daj backslashe do apostrofów/cudzysłowów i wszystko w funkcję. w head script src, gdzies w body <script>funkcja()</script>

No i wlasnie nie wiem jak zrobic ta funkcje wink.gif
gorden
19.11.2011, 00:08:16 
[JAVASCRIPT] pobierz, plaintext 
  1. function magicznafunkcja() {
  2.  //linijki 4-15
  3.  var html = "<select name=\"silnik\">................................";
  4.  document.write(html);
  5. }
[JAVASCRIPT] pobierz, plaintext
pamiętaj o backslashach przed cudzysłowami
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.