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

funkcja javascript

VPS Starter Arubacloud
+1 głos
356 wizyt
pytanie zadane 9 maja 2021 w JavaScript przez Doge Gaduła (3,320 p.)

Witam, mam problem z kodem:

var numer = 1;
function zmienslajd()
{
	numer++;
	if(numer>5)
	{
		numer=1;
	}
	
	var plik = "<img src=\"img/"+numer+".jpg\" width=\"250\" height=\"250\"" />;
	document.getElementById("slider").innerHTML=plik;
	
	setTimeout("zmienslajd()", 5000);
}

zdjęcia są wstawione w folderze img pod nazwą 1.jpg, 2.jpg itp. Problem jest taki, że w ogóle nie wyświetla zdjęć na stronie, nawet tak jak widać próbowałem z width i height coś zmieniać, bo może się nie mieściły, ale nadal nic. Kod html, jeżeli to coś zmieni:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Najlepsze filmy</title>
	<meta name="description" content="Przed Tobą spis najlepszych filmów" />
	<meta name="keywords" content="film, filmweb, najlepsze filmy" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<link rel="stylesheet" href="style.css">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
	<script type="text/javascript" src="timer.js"></script>
	<script type="text/javascript" src="sprawdzanie.js"></script>
	<script type="text/javascript" src="slider.js"></script>
</head>



<body onload="odliczanie();zmienslajd();">
	<div id="strona">
		<div id="nawigacja">
			<h1>Najlepsze filmy</h1>
		</div>
		<div id="sprawdzanie">
			<input type="text" id="pole"/>
			<input type="submit" value="Sprawdź" onclick="sprawdz()"/>
		</div>
		<div id="wypisanie">
		</div>
		<div id="ranking">
			1. <a href="https://www.filmweb.pl/serial/Skazany+na+%C5%9Bmier%C4%87-2005-236096" target="blank" title="Filmweb">Skazany na śmierć</a><br />
			2. <a href="https://www.filmweb.pl/serial/Dom+z+papieru-2017-792826" target="blank" title="Filmweb">Dom z papieru</a>
		</div>
		<div id="glowne">
			<h1>Najlepsze filmy</h1>
			<br />
			<div id="slider">
			</div>
		</div>
		<div id="stopka">
		</div>
	</div>
</body>
</html>

Jeżeli będzie trzeba, to mogę jeszcze przesłać kod css i pozostałych plików zawartych na stronie. Prosiłbym o jak najszybszą pomoc :)

1
komentarz 9 maja 2021 przez ScriptyChris Mędrzec (190,190 p.)
Może w konsoli przeglądarki (włączysz ją klawiszem F12) są błędy wskazujące przyczynę problemu?

2 odpowiedzi

+1 głos
odpowiedź 9 maja 2021 przez Bartek030 Obywatel (1,460 p.)
wybrane 9 maja 2021 przez Doge
 
Najlepsza

W linii 10 masz pomieszane znaki cudzysłowia. Przez to program myli miejsce, w którym kończysz ciąg znaków. Użyj apostrofów na początku i końcu definiowania zmiennej plik.  Jest ok, stosujesz backslash'e, ale mimo to staraj się stosować apostrofy na początku i końcu.

Znak końca tagu img jest poza cudzysłowem.

Sprawdź też gdzie trzymasz plik js względem html. Jeśli masz go w osobnym folderze to musisz też "wyjść" z tego folderu.

+1 głos
odpowiedź 9 maja 2021 przez VBService Ekspert (251,210 p.)
edycja 9 maja 2021 przez VBService

Moim zdaniem kod

var plik = "<img src=\"img/"+numer+".jpg\" width=\"250\" height=\"250\"" />;

przez zastosowanie: string interpolation, staje się bardziej czytelny i łatwiej jest go formatować.  wink

const plik = `<img src="img/${numer}.jpg" />`;

 

 

  let numer = 0;
  function zmienslajd()
  {
    (numer>=5) ? numer=1 : numer++; // ternary operator
    const plik = `<img src="img/${numer}.jpg" />`; // interpolation - backticks
    document.getElementById('slider').innerHTML = plik;
     
    setTimeout(zmienslajd, 5000);
  }

  zmienslajd();

 

a, może ...?  wink

<style>
  #slider img {
    width: 250px;
    height: 250px;
  }
</style>

<div id="slider">
  <img src="" />
</div>

<script>
  let numer = 0;
  function zmienslajd()
  {
    (numer>=5) ? numer=1 : numer++; // ternary operator 
    document.querySelector('#slider img').src = `img/${numer}.jpg`; // interpolation - backticks
     
    setTimeout(zmienslajd, 5000);
  }

  zmienslajd();
</script>

 

 

Conditional (ternary) operator ]

Podobne pytania

0 głosów
1 odpowiedź 193 wizyt
pytanie zadane 9 lutego 2023 w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 89 wizyt
pytanie zadane 21 stycznia 2020 w JavaScript przez Kamila Użytkownik (680 p.)
0 głosów
1 odpowiedź 218 wizyt
pytanie zadane 9 czerwca 2018 w JavaScript przez betman Bywalec (2,630 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 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!

...