• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ponowna prośba o rozwiązanie problemu z grą w JS :(

VPS Starter Arubacloud
0 głosów
288 wizyt
pytanie zadane 3 października 2017 w JavaScript przez Radosław Foltyński Obywatel (1,180 p.)

Witajcie drodzy forumowicze. Znów zgłaszam się z swoim problemem, lecz tym razem z trochę innej beczki. Chodzi o to, że rozwiązałem problem z brakiem interakcji, po kliknięciu na obrazek (chodź nie do końca ale o tym zaraz). Rozwiązałem, też problem z przełączaniem się między blokami, drugim blok po prostu tymczasowo wyłączyłem. Mam stronę testową, na której robię testy i to na niej jest problem. Po pierwsze dwa bloki jeden na drugim elegancko się przełączają przy kliknięciu i to ok. Jednak gdy kliknę na obrazek bloki również się przełączają. Dopiero gdy wraca do strony pierwszej widnieje zmieniony obrazek. To jeszcze nie koniec zmiana obrazka jest zrobiona w w html-u bo funkcja js nie działa. Oto kod źródłowy:
 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styl.css" type="text/css">
</head>
<body>
<div id="calosc">
<div id="gora">
<h1> Góra</h1>
</div>
<div id="srodek">
<script>
function zmiana(obraz)
{
		if (obraz == 'obrazek1')
		{
		document.getElementById('obraz').src = "obrazek2.jpg";
		}
		else if (obraz == 'obrazek2')
		{
		document.getElementById('obraz').src = "obrazek3.JPEG";
		}
		else if (obraz =='obrazek3')
		{
		document.getElementById('obraz').src = "obrazek3.JPEG";
		}
		else 
		{
		document.getElementById('obraz').src = "obrazek2.jpg";
		}
		/*próbowałem i coś takiego
		if ((obraz == getElementById(obrazek1)) || (obraz == getElementById(obrazek4)))
		{
		document.getElementById('obraz').src = "obrazek2.jpg";
		}
		else
		{
		document.getElementById('obraz').src = "obrazek3.JPEG";
		}
};
function fn1()
{
	document.getElementById('blok1').style.display = "none";
	document.getElementById('blok2').style.display = "inline";
};
function fn2()
{
	document.getElementById('blok2').style.display = "none";
	document.getElementById('blok1').style.display = "inline";
};
</script>
<div id="blok1" onclick="fn1()">
<p> Strona numer 1</p>
<div id="1">
<img src="obrazek1.jpg" id="obrazek1"  width="100px" height="100px" onclick="zmiana(obrazek1)">
</div>
<div id="2">
<img src="obrazek1.jpg" id="obrazek2" width="100px" height="100px" onclick="zmiana(obrazek2)">
</div>
<div id="3">
<img src="obrazek1.jpg" id="obrazek3" width="100px" height="100px" onclick="zmiana(obrazek3)">
</div>
<div id="4">
<img src="obrazek1.jpg" id="obrazek4" width="100px" height="100px" onclick="zmiana(obrazek4)">
</div>
</div>
<div id="blok2" onclick="fn2()">
<p> Strona numer 2</p>
</div>
</div>
<div id="dol">
<a> to jest dol</a>
</div>
</div>
</body>
</html>

Czemu ona nie chce działać? Gdzie jest błąd? Funkcje wziąłem z kółka i krzyżyk. Co do obrazków to już zaznaczam nie przełączają się. Wcześniej gdy miałem w htmlu coś takiego:

<div id="1">
<img src="obrazek1.jpg" width="100px" height="100px" onclick="this.src='obrazek2.jpg'" onclick="this.src='obrazek1.jpg'">
</div>

To się przełączał obrazek lecz tak być nie może, funkcja ma zamieniać obrazki. Już na prawdę jestem zmęczony tym projektem, bo o co kurde chodzi :(.Szperałem po necie ale żadna, podkreślam żadna funkcja nie działa :\. Z góry dziękuje za pomoc i przepraszam, że znów o to męczę:\.

komentarz 3 października 2017 przez ScriptyChris Mędrzec (190,190 p.)

Czy konsola pokazuje jakieś błędy? Wykonsoluj parametr obraz na początku funkcji zmiana i pokaż co tam jest.

komentarz 3 października 2017 przez Radosław Foltyński Obywatel (1,180 p.)

Nie wiem czy o to Ci chodziło ale daje co mi powiedziała o błędach:

Uncaught ReferenceError: getElementById is not defined
    at zmiana (test.html:16)
    at HTMLImageElement.onclick (test.html:39)
test.html:16 Uncaught ReferenceError: getElementById is not defined
    at zmiana (test.html:16)
    at HTMLImageElement.onclick (test.html:39)
test.html:16 Uncaught ReferenceError: getElementById is not defined
    at zmiana (test.html:16)
    at HTMLImageElement.onclick (test.html:45)
test.html:16 Uncaught ReferenceError: getElementById is not defined
    at zmiana (test.html:16)
    at HTMLImageElement.onclick (test.html:48)

 

komentarz 3 października 2017 przez ScriptyChris Mędrzec (190,190 p.)

Nie zamknąłeś komentarza.

Co chcesz osiągnąć przez ten zapis?

onclick="zmiana(obrazek1)"

Jeśli id, to umieść to umieść to w stringu (otocz pojedynczym lub podwójnym cudzysłowem).

if ((obraz == getElementById(obrazek1)) || (obraz == getElementById(obrazek4)))

W tym if próbujesz sprawdzić, czy zmienna obraz jest taka sama co element DOM o id obrazek1 lub obrazek4. A pod zmienną nie masz referencji do elementu DOM, tylko aktualnie undefined. Poprzednie ify mają większy sens.

komentarz 3 października 2017 przez Radosław Foltyński Obywatel (1,180 p.)

Wiem, że nie zamknąłem komentarza, mój błąd :). Czyli mam zrobić to tak?
 

onclick="zmiana('obrazek1')"

Bardziej mi chodziło aby zmienna obraz była uniwersalna, aby podstawić większą ilość id obrazków. Może porównuje ale, bardziej chodziło o to aby obrazek1 i 4 zmieniały się w inny obrazek, niż 2 i 3 stąd if. Wiem, że ma większy sens ale zrobić takich if-ów 64 :O. Tyle niestety posiada tabelka w grze z pracy :\. Dodam jeszcze, że funkcję wziąłem z kodu źródłowego kólo i krzyżyk. Oto link https://zukiel.blogspot.com/2015/03/javascript-gra-koko-krzyzyk-wersja-z.html. Ogólnie dziękuję za drogę, którą mam podążać ale zapytam czy są jeszcze jakieś pomysły? Jak pisałem w pracy są 64 elementy a nie 4 :\.

komentarz 3 października 2017 przez ScriptyChris Mędrzec (190,190 p.)

Bardziej mi chodziło aby zmienna obraz była uniwersalna, aby podstawić większą ilość id obrazków

W takim razie, zamiast konkretnego stringa podstawiaj this.id. co przekaże Ci do funkcji identyfikator elementu DOM, na którym onclick został wywołany. Polecam jednak przesiąść się na addEventListener i zastosować tutaj Event Delegation - jeśli będziesz mieć listę tych samych elementów, to wygodniej nasłuchiwać zdarzeń na ich rodzicu, a przez obiekt zdarzenia sprawdzać, które z dzieci wywołało zdarzenie.

komentarz 4 października 2017 przez Radosław Foltyński Obywatel (1,180 p.)
Wielkie dzięki :).

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
2 odpowiedzi 211 wizyt
pytanie zadane 25 września 2018 w JavaScript przez kameleon Użytkownik (590 p.)
0 głosów
4 odpowiedzi 311 wizyt
pytanie zadane 29 września 2017 w JavaScript przez Radosław Foltyński Obywatel (1,180 p.)
0 głosów
1 odpowiedź 132 wizyt
pytanie zadane 1 listopada 2023 w HTML i CSS przez olo123 Nowicjusz (120 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...