[CR] JavaScript (#2): Mechanika działania skryptów: uchwyty, funkcje, zdarzenia

pytanie zadane 5 sierpnia 2016 w Nasze poradniki przez Mirosław Zelent Nałogowiec (34,750 p.)

CR = Code Review. O co chodzi? Zajrzyj tutaj
Pełna lista wszystkich Code Review? Zajrzyj tutaj

https://www.youtube.com/watch?v=XJKXlxn9e-g

slider.html:

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		
		<style>
			body
			{
				background-color: #222222;
				font-size: 24px;
				color: white;
			}
		</style>
		
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		
		<script type="text/javascript">
		
			var numer = Math.floor(Math.random()*5)+1;
			
			var timer1 = 0;
			var timer2 = 0;
			
			function ustawslajd(nrslajdu)
			{
				clearTimeout(timer1);
				clearTimeout(timer2);
				numer = nrslajdu - 1;
				
				schowaj();
				setTimeout("zmienslajd()", 500);
				
			}
			
			function schowaj()
			{
				$("#slider").fadeOut(500);
			}
		
			function zmienslajd()
			{
				numer++; if (numer>5) numer=1;
				
				var plik = "<img src=\"slajdy/slajd" + numer + ".png\" />";
				
				document.getElementById("slider").innerHTML = plik;
				$("#slider").fadeIn(500);
				
				timer1 = setTimeout("zmienslajd()", 5000);
				timer2 = setTimeout("schowaj()", 4500);
			
			}
			
		</script>
		
	</head>
	<body onload="zmienslajd()">
	
		<span onclick="ustawslajd(1)" style="cursor:pointer;">[ 1 ]</span>
		<span onclick="ustawslajd(2)" style="cursor:pointer;">[ 2 ]</span>
		<span onclick="ustawslajd(3)" style="cursor:pointer;">[ 3 ]</span>
		<span onclick="ustawslajd(4)" style="cursor:pointer;">[ 4 ]</span>
		<span onclick="ustawslajd(5)" style="cursor:pointer;">[ 5 ]</span>
		
		<div id="slider"></div>
		
	</body>
</html>

zadanie1.html:

<!DOCTYPE html>
<html lang="pl">

<head>
	<meta charset="utf-8" />
	
	<script type="text/javascript">
	
		function sprawdz()
		{
			var liczba = document.getElementById("pole").value;
			
			if (liczba>0) document.getElementById("wynik").innerHTML="dodatnia";
			else if (liczba<0) document.getElementById("wynik").innerHTML="ujemna";
			else if (liczba==0) document.getElementById("wynik").innerHTML="zero";
			else document.getElementById("wynik").innerHTML="to nie jest liczba. You know nothing John Snow";
		
		}
	
	</script>
</head>

<body>

	<input type="text" id="pole" />
	<input type="submit" value="Sprawdź" onclick="sprawdz()"/>
	
	<div id="wynik"></div>

</body>

</html>

zadanie2.html:

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		
		<script type="text/javascript">
			
			function wypisz()
			{
				var liczba1 = document.getElementById("pole1").value;
				var liczba2 = document.getElementById("pole2").value;
				var napis = "";
				
				for (i=liczba1; i<=liczba2; i++)
				{
					napis = napis + i + " ";
				}
				document.getElementById("wynik").innerHTML = napis;
			}
			
		</script>
		
	</head>
	<body>
	
		<input type="text" id="pole1" />
		<input type="text" id="pole2" />
		<input type="submit" value="Pokaż" onclick="wypisz()"/>
		
		<div id="wynik"></div>
	
	</body>
</html>

Paczka do pobrania: TUTAJ

komentarz 7 stycznia 2018 przez goopeak Nowicjusz (100 p.)
edycja 7 stycznia 2018 przez goopeak

Witam,

mam pytanie do zadania nr 2: dlaczego program nie działa dla przedziałów np 3:15, albo 220:1200 ?

Tak jakby dla przedziału 3:15 porównywał tylko pierwsze cyfry (3:1), bo 3:45 działa poprawnie. W przedziale 220:1220 analogiczna sytuacja, program chyba sprawdza tylko 3 pierwsze cyfry (220:120) bo 220:2220 działa OK.

Skąd ten błąd, jak to można poprawić?

Dla sprawdzenia wstawiam swój kod: https://codepen.io/goopeak/pen/ypPGjV

komentarz 14 marca 2018 przez FeanorSopot Nowicjusz (100 p.)
przeniesione 15 marca 2018 przez FeanorSopot

Dodaj "Number" przed uchwytem: var liczba1 = Number(document.getElementById("pole1").value);

I analogicznie w liczba2.

Powinno zadziałać.

komentarz 14 marca 2018 przez Ehlert Ekspert (212,670 p.)

Ale odgrzałeś.

1	komentarz 15 marca 2018 przez criss Mędrzec (172,590 p.) @FeanorSopot, to powinno byc w komentarzu (mozesz chyba przenieść poprzez edit)

komentarz 15 marca 2018 przez FeanorSopot Nowicjusz (100 p.)

Racja, pomyliłem się, dzięki za czujność :)

komentarz 17 września 2019 przez Zanna Nowicjusz (120 p.)

@FeanorSopot, a możesz wytłumaczyć skąd i dlaczego taka konstrukcja jeżeli oczywiście to nie kłopot.

pozdrawiam

komentarz 5 lipca 2021 przez qwiateq Początkujący (430 p.)

Wiem że odkop, ale może przyda się komuś, kto tu kiedyś zajrzy

Odczytana wartość w javascript z pola input jest typu string, trzeba ją przekonwertować na number. Funkcja nie wyświetlała pewnych przedziałów, bo porównywała odczytane liczby jako litery.

function sprawdzTyp()
{
	var liczba1 = document.getElementById("liczba1").value;
	var liczba2 = Number(document.getElementById("liczba2").value);
	document.getElementById("test").innerHTML = typeof liczba1 + " " + typeof liczba2;
}

<input type="text" id="liczba1" />
<input type="text" id="liczba2" />
<input type="button" value="Sprawdź typ" onclick="sprawdzTyp()" />
<div id="test"></div>