Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dwa skrypty i dwie galerie
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
darksiders94
Mam stronkę. Do tej strony mam kilka skryptów. Jeden slider na górze. Na każdej podstronie te same skrypty, więc jeden plik js. Teraz chcę na jednej z podstron zrobić drugi slider na dole. W tym samym pliku js wszystko się kłóci ze sobą. W osobnych również się kłóci. Ten, który jest podlinkowany niżej działa, a ten nad nim już nie. Jak umieścić w sekcji head pliki js aby się nie gryzły? Drugie pytanie: Jak w skryptach lub CSS odwoływać się do różnych input, img itd jeśli jest ich dużo na stronie?

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2.  
  3. <script type="text/javascript" src="skryptySzablony.js"></script>
  4. <script type="text/javascript" src="skrypty.js"></script>
  5.  
  6. <link rel="stylesheet" href="css/reset.css" />
  7. <link rel="stylesheet" href="css/style.css" />
  8. </head>
markuz
Ad. 1.
Nazwy funkcji, zmiennych, obiektów tworzyć z innym przedrostkiem np. ss_ dla skryptySzablony.js a s_ dla skrypty.js.
Ad. 2.
Może za pomocą klas? Albo klas elementów nadrzędnych? itp. itd. możliwości jest wiele.

darksiders94
Hmm.. no tak, ale nazwy funkcji mam zupełnie inne dla tych dwóch plików. W jednym pliku znajdują się inne funkcje a w drugim inne. Co wtedy da mi przedrostek?
markuz
Nic. A konsola co Ci zwraca?
darksiders94
ReferenceError: body is not defined skryptySzablony.js:15
TypeError: imie is null

to drugie wiem do czego ale z tym pierwszym mam problem i nie wiem jak to zrobic..
markuz
A podzielisz się tymi dwoma plikami?
Jesteś pewny, że osobno działają poprawnie? (Konsola wtedy nic nie wyrzuca?)
darksiders94
1. plik skrypty.js


  1. //---------------------------------BANER-------------------------------
  2.  
  3. var zdjecia = new Array("obraz-slider1","obraz-slider2","obraz-slider3");
  4.  
  5. const FOTY = "zdjecia/";
  6. const SEC = 1000;
  7. const ZMIANA = 5*SEC;
  8.  
  9. indeks = 0;
  10.  
  11.  
  12.  
  13.  
  14. function uaktualnij(){
  15. var img = document.getElementsByTagName("img");
  16. img[0].src = FOTY + zdjecia[indeks] + ".jpg";
  17. indeks++;
  18. if(indeks==zdjecia.length)
  19. indeks=0;
  20. //NAPISY NA SLAJDERZE-----------------------------------------------------
  21. var napisA = document.getElementById("napis1");
  22. if(indeks==1){
  23. napisA.style.visibility='visible';
  24. }else{
  25. napisA.style.visibility='hidden';
  26. }
  27.  
  28. var napisB = document.getElementById("napis2");
  29. if(indeks==2){
  30. napisB.style.visibility='visible';
  31. }else{
  32. napisB.style.visibility='hidden';
  33. }
  34.  
  35. var napisC = document.getElementById("napis3");
  36. if(indeks==0){
  37. napisC.style.visibility='visible';
  38. }else{
  39. napisC.style.visibility='hidden';
  40. }
  41.  
  42. }
  43. //PRZYCISKI----------------------------------------------------------
  44. function wstecz(){
  45. indeks-=2;//cofamy się o dwa, bo aktualny indeks wskazuje na zdjęcie następne w kolejce, a nie aktualnie wyświetlane
  46. if(indeks==-1)
  47. indeks=0;
  48. if(indeks==-2)
  49. indeks=1;
  50. }
  51.  
  52. function nastepny(){
  53. if(indeks==0)
  54. indeks=2;
  55. }
  56. //INTERVAL DO SLAJDERA-------------------------------------------------
  57. function startInterval(){
  58. interval = setInterval(function(){ uaktualnij(); }, ZMIANA);
  59. }
  60.  
  61. function stopInterval(){
  62. clearInterval(interval);
  63. }
  64. //STRZALKA DO GÓRY------------------------------------------------------
  65. function on_top(){
  66. if(window.scrollY!=0){
  67. window.scrollBy(0,-50);
  68. setTimeout('on_top()',0.1);
  69. }
  70. }
  71. //DYMEK-----------------------------------------------------------------
  72. function dymeczek(){
  73. var dym = document.getElementById("dymek");
  74. if(dym.style.visibility=='visible'){
  75. dym.style.visibility='hidden';
  76. }else{
  77. dym.style.visibility='visible';
  78. }
  79. }
  80. //ZEGAR-----------------------------------------------------------------
  81. function getTime(){
  82. return (new Date()).toLocaleTimeString();
  83. }
  84.  
  85. setInterval (function(){
  86. document.getElementById('zegar').innerHTML = getTime();
  87. }, 1000);
  88. //ZNIKANIE STRZALKI-------------------------------------------------
  89. function znikanie(){
  90. var strzalka = document.getElementById("gora");
  91. if(window.pageYOffset>100){
  92. strzalka.style.visibility='visible';
  93. }else
  94. {strzalka.style.visibility='hidden';}
  95. }
  96. //CHOWANIE BOCZNEGO MENU-----------------------------------------------
  97. function zam_otw(){
  98. var menu = document.getElementById("boczne_menu");
  99.  
  100.  
  101. if(przycisk_menu.value == "Zamknij"){
  102. boczne_menu.style.left='-35px';
  103. przycisk_menu.style.left='0px';
  104. przycisk_menu.value = "Otwórz";
  105. }else{
  106. boczne_menu.style.left='0px';
  107. przycisk_menu.style.left='35px';
  108. przycisk_menu.value = "Zamknij";
  109. }
  110. }
  111. //FORMULARZ--------------------------------------------------------------
  112. //MENU BOCZNE------------------------------------------------------------
  113. function menubok(){
  114. var lista = document.getElementById("lista2");
  115. if(lista.style.display == 'none'){
  116. lista.style.display = 'block';
  117. }
  118. }
  119. function wylmenubok(){
  120. var lista = document.getElementById("lista2");
  121. lista.style.display = 'none';
  122. }
  123. //CIASTECZKA-----------------------------------------------------------
  124. function stworzCiastko(nazwa, wartosc, waznosc){
  125. var wygasa = "";
  126.  
  127. if(waznosc){
  128. var data = new Date();
  129. data.setTime(data.getTime() + (1000 * 60 * 60 * 24 * waznosc));
  130. wygasa = "; expires=" + data.toGMTString();
  131. }
  132.  
  133. document.cookie = nazwa + "=" + wartosc + wygasa;
  134. }
  135. function pobierzCiastko(nazwa){
  136. var ciastka = document.cookie;
  137. if(ciastka != ""){
  138. ciastka = ciastka.split("; ");
  139. for(var i in ciastka){
  140. var cnazwa = ciastka[i].split("=")[0];
  141. if(cnazwa == nazwa){
  142. var wartosc = ciastka[i].split("=")[1];
  143. return unescape(wartosc);
  144. }
  145. }
  146. }
  147. }
  148. function sprawdzCiastko(nazwa){
  149. var wartosc = pobierzCiastko(nazwa);
  150. var imie = document.getElementById("imie");
  151. if(wartosc){
  152. imie.innerHTML = wartosc;
  153. }else{
  154. wartosc = rozmowa(), komunikatCiastka();
  155. waznosc = 365;
  156. if(wartosc || !isNaN(waznosc)){
  157. stworzCiastko(nazwa, wartosc, waznosc);
  158. imie.innerHTML = wartosc;
  159. }else{
  160. alert("nie tworze ciastka");
  161. }
  162. }
  163. }
  164. //CIASTECZKA-PRZYCISK-----------------------------------------------
  165. function uwaga(){
  166. var komunikat = document.getElementById("ciasteczka");
  167. if(komunikat.style.visibility=='visible'){
  168. komunikat.style.visibility='hidden';
  169. }
  170. }
  171. function komunikatCiastka(){
  172. var komunikat = document.getElementById("ciasteczka");
  173. if(komunikat.style.visibility=='hidden'){
  174. komunikat.style.visibility='visible';
  175. }
  176. }
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183. //wyswietlanie---------------------------------------------------------
  184. window.onload = function(){
  185. uaktualnij();
  186. startInterval();
  187.  
  188. //PRZYCISKI-----------------------------------------
  189. var but = document.getElementById("przycisk_stop");
  190. var start = "Rozpocznij prezentację";
  191. var stop = "Wstrzymaj prezentację";
  192. przycisk_stop.value = stop;
  193. przycisk_stop.onclick = function(){
  194. if(this.value == stop){
  195. stopInterval();
  196. this.value = start;
  197. }else{
  198. startInterval();
  199. this.value = stop;
  200. }
  201. }
  202.  
  203. var but = document.getElementById("przycisk_poprzedni");
  204. przycisk_poprzedni.onclick = function(){
  205. stopInterval();
  206. wstecz();
  207. uaktualnij();
  208. if(przycisk_stop.value == stop)
  209. startInterval();
  210. if(przycisk_stop.value == start)
  211. stopInterval();
  212. }
  213.  
  214. var but = document.getElementById("przycisk_nastepny");
  215. przycisk_nastepny.onclick = function(){
  216. stopInterval();
  217. nastepny();
  218. uaktualnij();
  219. if(przycisk_stop.value == stop)
  220. startInterval();
  221. if(przycisk_stop.value == start)
  222. stopInterval();
  223. }
  224. //STRZALKA DO GORY---------------------------------------
  225. var top = document.getElementById("gora");
  226. gora.onclick = function(){
  227. on_top();
  228. }
  229. //DYMEK----------------------------------------------------
  230. var klocek = document.getElementById("klocek4-menu");
  231. klocek.onclick = function(){
  232. dymeczek();
  233. }
  234. //ZNIKANIE STRZALKI-----------------------------------------
  235. window.onscroll = function(){
  236. znikanie();
  237. }
  238. //ZEGAR--------------------------------------------------
  239. document.getElementById('zegar').innerHTML = getTime();
  240. //OTWIERANIE.ZAMYKANIE MENU BOCZNE---------------------------------
  241. var otwieranie = document.getElementById("przycisk_menu");
  242. przycisk_menu.value = "Zamknij";
  243. przycisk_menu.onclick = function(){
  244. zam_otw();
  245. }
  246. //MENU BOCZNE--------------------------------------------------------------
  247. var lista = document.getElementById("lista2");
  248. lista.style.display = 'none';
  249. var ON = document.getElementById("ON");
  250. ON.onmouseover = function(){
  251. menubok();
  252. }
  253. onclick = function(){
  254. wylmenubok();
  255. }
  256. //CIASTECZKA-----------------------------------------------------------
  257. var zamknij = document.getElementById("zamknijUwaga");
  258. var komunikat = document.getElementById("ciasteczka");
  259. komunikat.style.visibility='hidden';
  260. zamknij.onclick = function(){
  261. uwaga();
  262. }
  263. var nazwaCiastka = "niezapominajka";
  264. sprawdzCiastko(nazwaCiastka);
  265.  
  266.  
  267.  
  268. }
  269.  
  270.  
  271.  
  272. //---------------------------------------ROZMOWA---------------------
  273.  
  274.  
  275. function rozmowa(){
  276. var zobaczskrypty = confirm("Czy chcesz zobaczyć wszystkie skrypty utworzone na tej stronie?");
  277. if(zobaczskrypty == true){
  278.  
  279. var podajimie = prompt("W takim razie, proszę, podaj mi swoje imię:");
  280.  
  281. if(podajimie == null || podajimie ==""){
  282.  
  283. alert("Widocznie masz brzydkie imię. Mimo to możesz wejść.");
  284.  
  285. }else{
  286.  
  287. var podobasie = confirm("Witaj " + podajimie + ", miło Cię poznać! :) Te okienka są właśnie kilkoma ze skryptów. Podobają Ci się?");
  288.  
  289. if(podobasie == true){
  290.  
  291. var zagramy = confirm("Świetnie, zagramy w grę? :)");
  292.  
  293. if(zagramy == true){
  294.  
  295. var wybierz = prompt("Wybierz liczbę od 1 do 5:");
  296.  
  297. if(wybierz == 3){
  298. alert("Brawo! Dostajesz 10 punktów! Masz dziś szczęście, baw się dobrze na mojej stronie :)");
  299. }else if(wybierz == null){
  300. alert("Zdecyduj się w końcu czy grasz!");
  301. }else if(wybierz == 1 || wybierz == 4){
  302. alert("Przykro mi. Nic nie dostałeś. Zobacz moją stronę :)");
  303. }else if(wybierz == 2 || wybierz == 5){
  304. alert("Dostajesz 5 punktów! Źle nie jest, ale mogło być lepiej :)");
  305. }else if(wybierz > 5 || wybierz < 1){
  306. alert("Koniec gry, nie potrafisz czytać!");
  307. }
  308.  
  309. }else{
  310.  
  311. alert("Szkoda, może następnym razem");
  312.  
  313. }
  314.  
  315. }else{
  316.  
  317. alert("Widocznie masz zrypany gust. Mimo wszystko możesz wejść.");
  318.  
  319. }
  320.  
  321. }
  322.  
  323. }else{
  324.  
  325. alert("Szkoda, ale możesz wejść dalej.");
  326.  
  327. }
  328.  
  329.  
  330. }


2. plik skryptySzablony.js

  1. //GALERIA-----------------------------------------------------------------
  2. var Szablony = new Array("obrazek1","obrazek2","obrazek3");
  3.  
  4. const FOTKI = "zdjecia/mini/";
  5.  
  6. indeks = 0;
  7.  
  8. function aktualizacja(){
  9. var img = document.getElementsByTagName("img");
  10. img[1].src = FOTKI + Szablony[0] + ".png";
  11. img[2].src = FOTKI + Szablony[1] + ".png";
  12. img[3].src = FOTKI + Szablony[2] + ".png";
  13. }
  14.  
  15. window.onload = function(){
  16. aktualizacja();
  17.  
  18.  
  19. }
markuz
Może spróbuj tak:

1. To co masz w window.onload w 1 pliku (skrypty.js) wrzuć do jakieś funkcji np. window_onload_skrypty()
2. Wywal window.onload z tych dwóch plików
3. Dodaj nad samym znacznikiem (na "dole" strony) </body> znaczniki <script type="text/javascript></script> w a nich:
[JAVASCRIPT] pobierz, plaintext
  1. window.onload = function()
  2. {
  3. window_onload_skrypty();
  4. aktualizacja();
  5. }
[JAVASCRIPT] pobierz, plaintext


Zanim wczyta się okno (window.onload) 2 pliki zostaną wczytane, a co za tym idzie ten który się wczyta później - podmieni funkcję window.onload. (Przynajmniej tak mi się wydaje wink.gif)

Tutaj masz przykład: http://jsfiddle.net/qH78W/
Według twojego skryptu powinno się wyświetlić najpierw 1 a potem 2. Natomiast wyświetla się samo 2 A co za tym idzie wykona sie tylko ostatnio zdefiniowana funkcja window.onload.
darksiders94
Hmm.. teraz jest tak, że kolejność w head nie ma znaczenia i skrypty.js się wczytują bez problemu, a skryptySzablony nie wczytują się w ogóle. Konsola nie wywala teraz błędu. Może to wina samego skryptu
markuz
Używaj console.log(), na przykładzie twojego skryptu:
[JAVASCRIPT] pobierz, plaintext
  1. function aktualizacja(){
  2. var img = document.getElementsByTagName("img");
  3. console.log(img);
  4. img[1].src = FOTKI + Szablony[0] + ".png";
  5. img[2].src = FOTKI + Szablony[1] + ".png";
  6. img[3].src = FOTKI + Szablony[2] + ".png";
  7. }
[JAVASCRIPT] pobierz, plaintext


Powinno zwrócić tablicę z przynajmniej 4 elementami (w skrypcie odnosisz się do img[1] chociaż img[0] to pierwszy element - celowo?)
darksiders94
celowo. Ponieważ mam na stronie już jeden element img na górze przy pierwszym slajderze. Kiedy wpiszę 1 to skrypt działa przy tym na dole a gdy wpiszę 0 to przy tym u góry.
markuz
Co zwróciła konsola? 4 elementy?
Co chcesz osiągnąć za pomocą drugiego skryptu?

Już w jednym z pierwszych postów napisałeś, ze funkcje się nie powtarzają a mimo tego window.onload jakoś się powtarzał - czyż nie? smile.gif

Jak będę Ci podawać fragment kodu następnym razem (albo ktokolwiek inny z tego forum) z console.log() w środku - to chce abyś przekazał dalej co zwróciło console.log() bo bez tego nie dojdziemy do niczego.
darksiders94
Konsola już nic nie zwraca. Dopiero zaczynam z JS i może to jakaś pierdoła.

Chciałem po prostu zrobić drugi slajder na dole strony. To wszystko biggrin.gif A tu mi nagle wszystko szaleje.

Dobra.. już mam. Przyczyną jednak było name.. Było niepotrzebną wartościa i to mi zaburzało cały kod. Nie miałem pojęcia, że to aż tak istotne. Dziękuję za pomoc i zaangażowanie smile.gif
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.