JavaScript obiekty DOM, prośba o pomoc.

pytanie zadane 14 kwietnia 2016 w JavaScript przez AV'ger Użytkownik (790 p.)

Cześć. Muszę jak najszybciej rozwiązać kilka zadań z JS obiektów DOM. Kompletnie nie ogarniam tematu jednak staram się jak mogę. Zatrzymałem się obecnie na tym zadaniu:

"Na podstawie ćwiczenia 1 opracować skrypt JS, który sprawdzi, czy liczba 1 jest równa liczbie 2 wyświetlając odpowiedni komunikat (komunikat w trzecim okienku tekstowym)."

Wzór ćwiczenia 1'wszego:
<html><head>  <title>Js1</title>
<script type="text/
javascript">
//funkcja 
function oblicz()
{ var l1=document.getElementById('l1'); //pobierz element o id='l1' 
-
liczba1
l1=l1.value; //pobierz wartośc elementu l1 
-
tekst.
l1=parseInt(l1); //konwertuj tekst na liczbę całkowitą
var l2=document.getElementById('l2'); //pobierz element o id='l2' 
-
liczba 2
l2=parseInt(l2.value); //konwertuj wartość na liczbę całkowitą
var s=document.getElementById('suma'); //pobierz element o id='suma'
s.value=l1+l2; //ustaw wartość dla elementu
s
}
</script>
</head>
<body>
<div> <h3>Dodawanie</h3>
<table><tbody>
<tr><td>Liczba 1:</td><td><input id="l1" /></td> </tr>
<tr><td>Liczba 2:</td><td><input id="l2" /></td> </tr>
<tr><td><button onclick="oblicz()">Oblicz sumę : </button></td>
<td><inp
ut id="suma" disabled="disabled" value=""/></td>
</tr></tbody></table>
</div></body></html>

A oto moje, niestety niedziałające rozwiązanie do powyższego zadania:

<!DOCTYPE>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome-1" />
<title> DOM</title>

<script type="text/javascript">
function rownosc()
{ 
var fir=document.getElementById('fir'); 
fir=fir.value; 
fir=parseInt(fir); 
var sec=document.getElementById('sec'); 
sec=parseInt(sec.value); 
var s=document.getElementById('rown'); 
s.value= if (fir>sec) {document.write(fir+);} else {document.write(sec+);}; 
}
</script>

</head>
<body>
<div> <h3>Zadanie</h3>
<table><tbody>
<tr><td>Liczba 1:</td><td><input id="l1" /></td> </tr>
<tr><td>Liczba 2:</td><td><input id="l2" /></td> </tr>
<tr><td><button onclick="rownosc()">Oblicz równość:</button></td>
<td><input id="rown" disabled="disabled" value=""/></td>
</tr></tbody></table>
</div>

</head>
<body>
</body>
</html>

3 odpowiedzi

odpowiedź 14 kwietnia 2016 przez Magicone Nałogowiec (45,100 p.)

Odwołujesz się do elementów o id #fir i #sec, które nie istnieją.

> s.value= if (fir>sec) {document.write(fir+);} else {document.write(sec+);};

Nie rozumiem po co pchasz tutaj document.write… Dodatkowo stosując jakieś dziwne próby sumowania obu zmiennych. :D Po prostu masz zmienne fir i sec, obliczasz ich sumę i wpisujesz do elementu o danym id, w Twoim wypadku jest to prawdopodobnie #rown.

komentarz 14 kwietnia 2016 przez AV'ger Użytkownik (790 p.)

Ale muszę sprawdzić który jest większy bądź mniejszy, sumę ogarniam :P

komentarz 14 kwietnia 2016 przez Magicone Nałogowiec (45,100 p.)

No to robisz warunek, czy fir > sec, jeśli nie to sprawdzasz, czy sec > fir, a jeśli nie no to masz obie liczby równe. Zadeklaruj sobie przed porównaniem jakąś zmienną, w spełnionych warunkach zapisuj do niej oczekiwany output, np. jeśli sec === fir zmiennej text przypisz "liczby są równe". Potem zostaje tylko nadać wartość zablokowanego inputa na ten tekst. :)

komentarz 14 kwietnia 2016 przez AV'ger Użytkownik (790 p.)

Dziękuję za pomoc i starania, ale nadal nie mogę do tego dojść. Zadeklarowałem zmienne #fir oraz #sec. Następnie użytkownik po wpisaniu swoich wartości liczbowych ma zobaczyć efekt, która z podanych liczb jest większa dlatego na końcu stosuję:

> var s=document.getElementById('rown');
s.value=

Po znaku równości muszę wstawić instrukcję warunkową tak? Czy mam wstawić więc taką linijkę?

If (fir > sec) { alert ('Większą liczbą jest: " +fir+ "<br />"); }

komentarz 14 kwietnia 2016 przez Magicone Nałogowiec (45,100 p.)

Nie zadeklarujesz zmiennych z hashtagiem w nazwie… :D Chodziło mi o przypisanie do jakichś zmiennych elementów o danym id, na przykład poprzez metodę document.getElementById. Skoro do zmiennej s przypisujesz element z wynikiem, to wartość możesz mu nadać tak, jak napisałeś, modyfikując jego pole value.

> Po znaku równości muszę wstawić instrukcję warunkową tak?

Nie. W klamrach instrukcji warunkowych, stosujesz operacje, która ma zostać wykonana, kiedy instrukcja będzie prawdziwa. Możesz jeszcze wykorzystać metodę Math.max, która zawsze zwraca największy z podanych argumentów. W Twoim wypadku, możesz zrobić coś takiego:

alert('Większą liczbą jest: ' + Math.max(fir, sec));

No i byłoby ok, tylko że sposób ten nie obsługuje wyjątku, czyli momentu, kiedy obie zmienne są sobie równe. Tak więc zastosuj coś takiego:

var text = 'podane liczby są równe';
if(fir > sec) text = 'większą liczbą jest ' + fir;
else text = 'większą liczbą jest ' + sec;
alert(text);

komentarz 14 kwietnia 2016 przez AV'ger Użytkownik (790 p.)

Zastosowałem Twój sposób, bardzo dziękuję za poświęcony czas i cenne rady! Program wykonywany jest poprawnie. Zabieram się za następne zadanie, mam nadzieję, że sobie tym razem poradzę i nikomu zawracać głowy nie będę musiał :P

odpowiedź 14 kwietnia 2016 przez PawełN Mądrala (5,340 p.)
edycja 14 kwietnia 2016 przez PawełN

odpowiedź 14 kwietnia 2016 przez AV'ger Użytkownik (790 p.)

A jednak zmuszony jestem powtórnie poprosić o pomoc z kolejnym zadaniem. Miałem nadzieję, że po wsparciu z pierwszym załapię obiekty DOM, lecz niestety... Treść zadania brzmi: Na podstawie ćwiczenia 1 zaprojektować formularz i opracować skrypt JS do obliczenia sumy kolejnych liczby z przedziału<a, b>.

Moja próba rozwiązania:

<!DOCTYPE>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome-1" />
<title> DOM</title>

<script type="text/javascript">
function przedzial()
{ 
var a=document.getElementById('a'); 
a=a.value; 
a=parseInt(a); 
var b=document.getElementById('b'); 
b=parseInt(b.value); 
var s=document.getElementById('suma');
s.value = (b - a + 1) * (a + b) / 2;
}
</script>

</head>
<body>
<div> <h3>Zadanie</h3>
<table><tbody>
<tr><td>Liczba 1:</td><td><input id="a" /></td> </tr>
<tr><td>Liczba 2:</td><td><input id="b" /></td> </tr>
<tr><td><button onclick="przedzial()">Oblicz sume przedziału:</button></td>
<td><input id="s" disabled="disabled" value=""/></td>
</tr></tbody></table>
</div>

</head>
<body>
</body>
</html>

Znalazłem w poście na forum dotyczącym przedziałów rozwiązanie z tym (b - a + 1) * (a + b) / 2; wzorem jednak nie otrzymuje oczekiwanego rezultatu. Jakieś sugestie które naprowadzą mnie na rozwiązanie? Pętla obowiązkowa?