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

js getElementsByClassName

VPS Starter Arubacloud
0 głosów
269 wizyt
pytanie zadane 11 lipca 2020 w JavaScript przez lujasjeden Użytkownik (860 p.)

ogladam sobie serie Mirosława Zelenta o javascript i w 2 odcinku bylo do napisania program, ktory sprawdzi czy wpisana liczba jest dodatnia ujemna czy 0 i kodzik tak wyglada:

<!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 = "0";
		else document.getElementById("wynik").innerHTML = "to nie liczba";
	}
	</script>
</head>
<body>
	<input type="text" id="pole" />
	<input type="submit" value="Sprawdz" onclick="sprawdz()" />
	
	<div id="wynik"><div>
</body>
</html>

 

Ale slyszalem, ze nie powinno sie robic duzo id a lepiej dawac wiecej class (prawda to?) i chcialem to zrobic z uzyciem class i tak wyglada kod: 

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	
	<script type="text/javascript">
	function sprawdz()
	{
		var liczba = document.getElementByClassName("pole");
		
		if (liczba>0) document.getElementByClassName("wynik").innerHTML="dodatnia";
		else if (liczba<0) document.getElementsByClassName("wynik").innerHTML="ujemna";
		else if (liczba==0) document.getElementsByClassName("wynik").innerHTML="zero";
		else  document.getElementsByClassName("wynik").innerHTML="to nie jest liczba";
	}
	</script>
</head>
<body>
	<input type="text" class="pole" />
	<input type="submit" value="Sprawdz" onclick="sprawdz()" />
	
	<div class="wynik"><div>
</body>
</html>

Ale nie dziala, ktos moze mi powiedziec dlaczego? Mozliwe ze jest to totalnie glupio napisane bo w sumie dopiero co zaczalem js i w ogole pierwszy raz uzywam getElemntById czy ByClassName

komentarz 11 lipca 2020 przez lujasjeden Użytkownik (860 p.)

A przy okazji mam nastepny problem, 

<!DOCTYPE html>
<html lang="pl">
<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 = "";
			
			if (liczba1>liczba2) napis="Liczba1 nie moze byc wieksza niz Liczba2";
			
		
			else
			{
				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="pokaz" onclick="wypisz()" />
	<div id="wynik"></div>
</body>
</html>

mam zabezpieczenie aby uzytkownik nie wpisal liczby1 wiekszej niz liczby2 i proboje teraz zrobic zabezpieczenie aby nie wpisywal jakis liter albo cos to probowalem tak:

else if (typeof liczba1!='number' || typeof liczba2!='number') napis="Błędne dane";

Ale to nie dziala bo jak wpisuje jakies liczby do tych liczba1 lub liczba2 to one nadal pozostaja undefined. Jak to zrobic najlepiej zeby zadzialalo?

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)
Dla nowego problemu utwórz proszę nowe pytanie.
komentarz 12 lipca 2020 przez VBService Ekspert (251,210 p.)
edycja 12 lipca 2020 przez VBService

@lujasjeden, Możesz użyć <input type="numberid="pole1" />

[  <input type="number"> ] [ How TO - Hide Arrows From Input Number ]

1
komentarz 12 lipca 2020 przez VBService Ekspert (251,210 p.)

@lujasjeden,  
Można użyć triku [ How to convert a string to a number in JavaScript ]

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">

    <script type="text/javascript">
        function wypisz()
        {
            var liczba1 = document.getElementById("pole1").value * 1
            var liczba2 = document.getElementById("pole2").value * 1
            var napis = "";

            if (isNaN(liczba1) || isNaN(liczba2)) {
                napis="Wartość z pola Liczba1 i Liczba2 może zawierać tylko cyfry";
            } else {
                if (liczba1>liczba2) {
                    napis="Liczba1 nie moze byc wieksza niz Liczba2";
                } else {
                    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="pokaz" onclick="wypisz()" />
    <div id="wynik"></div>
</body>
</html>

 

komentarz 12 lipca 2020 przez lujasjeden Użytkownik (860 p.)
Dziekuje bardzo dziala

1 odpowiedź

+1 głos
odpowiedź 11 lipca 2020 przez creend Gaduła (4,700 p.)
wybrane 11 lipca 2020 przez ScriptyChris
 
Najlepsza

1. Raz używasz document.getElementByClassName, co jest niepoprawne a raz używasz document.getElementsByClassName co jest poprawne. Funckcja document.getElementsByClassName zwraca HTMLCollection (Jest to tablicopodobne) elementów o danej klasie. 

var liczba = document.getElementsByClassName("pole")[0];
document.getElementsByClassName("wynik")[0].innerHTML="ujemna";

Tak powinno zadziałać

komentarz 11 lipca 2020 przez lujasjeden Użytkownik (860 p.)
w 1 kodzie zgubiles s? w Elements czy to tak ma byc?

I dzieki za wytlumacznie
komentarz 11 lipca 2020 przez pich Nowicjusz (140 p.)

witam!

raczej nie zadziała,

Są trzy problemy

a/

otrzymujemy kolekcję do której odwołujemy się konstrukcją

 liczba[0].value

b/

wynik jest typu String więc należy ją zmienić na liczbę konstrukcją

parseInt( liczba0[0].value )

c/

aby coś wpisać do diva wynik tez należy się odwołać konstrukcją

document.getElementsByClassName("wynik")[0].innerHTML="dodatnia";

 

Reasumując gotowy kod

------------------------------------------------

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
     
    <script type="text/javascript">
    function sprawdz()
    {
        var liczba0 = document.getElementsByClassName("pole");
        // alert(liczba[0].value+1);
        var liczba = parseInt( liczba0[0].value );
        //alert (liczba+1);
        
        if (liczba>0) 
        //alert("aa);
        
        document.getElementsByClassName("wynik")[0].innerHTML="dodatnia";
        else if (liczba<0) document.getElementsByClassName("wynik")[0].innerHTML="ujemna";
        else if (liczba==0) document.getElementsByClassName("wynik")[0].innerHTML="zero";
        else  document.getElementsByClassName("wynik")[0].innerHTML="to nie jest liczba";
        
    }
    </script>
</head>
<body>
    <input type="text" class="pole" />
    <input type="submit" value="Sprawdz" onclick="sprawdz()" />
     
    <div class="wynik"><div>
</body>
</html>
 

 

 

 

1
komentarz 11 lipca 2020 przez creend Gaduła (4,700 p.)

@lujasjeden, Zgubiłem racja

komentarz 11 lipca 2020 przez lujasjeden Użytkownik (860 p.)
ok to teraz juz wiem o co chodzi, dzieki!

Podobne pytania

0 głosów
1 odpowiedź 824 wizyt
–1 głos
1 odpowiedź 113 wizyt
0 głosów
1 odpowiedź 248 wizyt
pytanie zadane 14 grudnia 2022 w JavaScript przez Dawidziu Bywalec (2,610 p.)

92,453 zapytań

141,262 odpowiedzi

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

...