js getElementsByClassName

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

1	komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.) Ale slyszalem, ze nie powinno sie robic duzo id a lepiej dawac wiecej class Gdzie to słyszałeś?

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

na jakims kursie html, zeby nie dawac duzo id na stronie

1	komentarz 11 lipca 2020 przez creend Gaduła (4,700 p.) Do stylowania ID jest niewskazane lecz do wychwytywania elementów w JS, ID się używa

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

@lujasjeden

A jaki był kontekst tej wypowiedzi?

Jeśli na stronie jest np. dużo akapitów, to dzięki nadaniu im osobnych id, można załadować stronę posługując się URLem, który zawiera id jednego z akapitów, co pozwoli na automatyczne przewinięcie strony właśnie do wybranego akapitu (lub innego elementu, który ma id).

Fragment URLa, który zawiera nazwę id danego elementu na stronie jest poprzedzony znakiem "#" i nazywa się identyfikatorem fragmentu: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment

Przykładowo, posty na tym forum mają id, więc można podać link prowadzący bezpośrednio do danego posta w temacie - co sprawi, że użytkownik nie musi sam szukać tego posta na stronie.

Poniżej link, który przekieruje bezpośrednio do Twojego komentarza:

https://forum.pasja-informatyki.pl/498980/js-getelementsbyclassname?show=498982#c498982

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

dziekuje

komentarz 11 lipca 2020 przez JakSky Stary wyjadacz (14,770 p.)

@lujasjeden, polecam używać querySelector oraz querySelectorAll zamiast getElementsByClassName.

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

jak bede musial uzyc to przeczytam o tym narazie za malo umiem wydaje mi sie zebym sie bral za to, ale zapamietam

komentarz 11 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Metody querySelector[All] są wygodniejsze i bardziej uniwersalne w użyciu od getElementsBy*, bo przyjmują selektor CSS. Dzięki temu można bardziej precyzyjnie wybrać konkretny element lub ich zbiór niż ręcznie filtrować kolekcję zwróconą przez getElementsBy*.

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 (252,660 p.)
edycja 12 lipca 2020 przez VBService

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

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

komentarz 12 lipca 2020 przez VBService Ekspert (252,660 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ź

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

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

liczba[0].value

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

parseInt( liczba0[0].value )

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>