Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyliczenia wraz z typem działania z listy rozwijalnej
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
patrykz103
14.09.2016, 19:44:28
Witam,

Liczba 1 oraz Liczba 2 to są pola, gdzie wpisuję liczbę, a w liście rozwijalnej wybieram typ działania (mnożenie, dzielenie itd.).
Pierwsza funkcja sprawdza, czy w polu Liczba 1 lub Liczba 2 są wpisane tylko liczby. Dalsza funkcja posiada właśnie wyżej wspomniane obliczenia. Gdy w liście rozwijalnej wybiorę np. "+", dodają się liczby z pola Liczba 1 i Liczba 2 (teoretycznie), lecz praktycznie w ogóle nie reaguje.. Siedzę od godzin 4 przy tym, przeglądam internet i nic. Funkcję obliczającą zapożyczyłem z tej strony, gdzie był taki sam "problem":
http://forum.sruu.pl/t-potrzebuje-kalkulatora-w-php

Co robię nie tak ? Ktoś może sprawdzić kod, w czym tkwi problem ?

Dziękuję za wszelką pomoc.
CODE
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
</head>
<form>
Liczba 1 <br>
<input type="text" id="one"><br>
Liczba 2 <br>
<input type="text" id="two"><br>
Działanie <br>
<select id="dzialania">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select><br>
wynik <br>
<input type="text" id="wynik"><br>
<input type="button" onClick="licz()" value="Oblicz" id="submit">
</form>
<script type="text/javascript">
document.getElementById("submit").onclick = liczby;
function liczby() {
one = document.getElementById("one").value;
two = document.getElementById("two").value;
if (isNaN (one)) {
document.getElementById('wynik').value = "Błąd w polu Liczba 1!";
}
else if (isNaN (two)) {
document.getElementById('wynik').value = "Błąd w polu Liczba 2!";
}
}
function licz() {
var one = parseInt(document.getElementById("one").value);
var two = parseInt(document.getElementById("two").value);
var dzialania = parseInt(document.getElementById("dzialania").value);
var wynik;
switch (dzialania) {
case '+': wynik = a+b; break;
case '-': wynik = a-b; break;
case '*': wynik = a*b; break;
case '/': wynik = a/b; break;
}
document.getElementById("wynik").innerHTML = wynik;
}
</script>
<body>
</body>
</html>
trueblue
14.09.2016, 19:51:04
Najpierw sprawdź gdzie jest wywoływana funkcja licz.
Potem znajdź w niej trzy błędy (w funkcji licz).
patrykz103
14.09.2016, 20:13:43
<input type="button" onClick="licz()" value="Oblicz" id="submit"> Wywoływanie
A tych 3 błędów nie zauważyłem, dlatego napisałem na forum, i niestety dalej ich nie zauważam.
trueblue
14.09.2016, 20:15:09
Zgadza się, mój błąd. Równocześnie wyedytowałem.

Pierwszy masz w parsując do integer znak działania.
patrykz103
14.09.2016, 20:17:57
Cytat(trueblue @ 14.09.2016, 21:15:09 ) *
Pierwszy masz w parsując do integer znak działania.

Nie rozumiem ohno-smiley.gif
trueblue
14.09.2016, 20:20:24
Tu:
[HTML] pobierz, plaintext 
  1. var dzialania = parseInt(document.getElementById("dzialania").value);
[HTML] pobierz, plaintext
patrykz103
14.09.2016, 20:27:10
Kod
var dzialania = document.getElementById("dzialania").value;
facepalmxd.gif

Pozostałych nie widu, nie słychu..
trueblue
14.09.2016, 20:32:50
Zobacz jakie zmienne poddajesz działaniom, a jakie pobierasz.
patrykz103
14.09.2016, 20:38:01
Cytat(patrykz103 @ 14.09.2016, 20:44:28 ) *
Funkcję obliczającą zapożyczyłem z tej strony, gdzie był taki sam "problem":
http://forum.sruu.pl/t-potrzebuje-kalkulatora-w-php


Także jeśli chodzi o tą funkcję licz, to nie mam tym bardziej pojęcia co w niej jest nie tak.. thumbsdownsmileyanim.gif
trueblue
14.09.2016, 20:42:10
Zobacz do jakiej zmiennej pobierasz jedną wartość, do jakiej drugą. A potem jakie zmienne np. dodajesz.

Trzeci błąd jest związany z polem wyniku. Zobacz w jaki sposób pobierasz wartości z pól. Przypisywanie działa podobnie.

Potem dostrzeżesz pewnie, że niezbyt dobre jest przypisywanie funkcji jako atrybutów, szczególnie kiedy masz do wywołania dwie i każdą z nich wywołujesz w inny sposób.
patrykz103
14.09.2016, 20:54:35
Śmieje się w tym momencie sam z siebie, bo patrze na ten kod, coś mi się nie podoba, a nawet nie wiem co laugh.gif laugh.gif
trueblue
14.09.2016, 21:08:28
Skąd pobierasz wartości do zmiennych a i b?
patrykz103
14.09.2016, 21:16:15
Kod
Liczba 1 <br>
    <input type="text" id="one"><br>
Liczba 2 <br>
    <input type="text" id="two"><br>

facepalmxd.gif facepalmxd.gif facepalmxd.gif
Sprawdzę czy działa.

Jednak jeszcze coś jest na rzeczy.

Rozumiem, że teraz jest dobrze ?
Kod
<script type="text/javascript">
function liczby() {
   one = document.getElementById("one").value;
   two = document.getElementById("two").value;
if (isNaN (one)) {
   document.getElementById('wynik').value = "Błąd w polu Liczba 1!";
   return false;
}
else if (isNaN (two)) {
   document.getElementById('wynik').value = "Błąd w polu Liczba 2!";
   return false;
}
return true;
}
function licz() {
if (!liczby()) {
    return;
}
    var one = parseInt(document.getElementById("one").value);
    var two = parseInt(document.getElementById("two").value);
    var dzialania = document.getElementById("dzialania").value;
    var wynik;
switch (dzialania) {
      case '+': wynik = one+two; break;
      case '-': wynik = one-two; break;
      case '*': wynik = one*two; break;
      case '/': wynik = one/two; break;
    }
    document.getElementById("wynik").innerHTML = wynik;
}
</script>



Wszystko jasne:
Kod
document.getElementById("wynik").value = wynik;


Już wszystko działa biggrin.gif Dzięki bardzo.
trueblue
14.09.2016, 21:25:39
Myślę, że nie działa sprawdzanie czy pola są wypełnione.
Można to w prosty sposób sprawdzić łącząc obydwie funkcje w jedną (wtedy również raz wystarczy pobrać wartości z pól).

A tak przy okazji, lepiej było przypiąć zdarzenie do onclick zamiast do atrybutu, a najlepiej poprzez addEventListener. Do etykiet pól stosuje się element <label>
patrykz103
14.09.2016, 21:45:31
Kod
else if (one == '') {
   document.getElementById('wynik').value = "Puste pole Liczba1!";
   return false;
}
else if (two == '') {
   document.getElementById('wynik').value = "Puste pole Liczba2!";
   return false;
}


Sprawdza czy jest puste pole.

Jeszcze mam jedno pytanie. Zrobiłem obliczanie procentów:

Kod
case '%': wynik = (one/two)*100; break;



Jeśli chciałbym, żeby do wyników dostawiał się znak %, to jak to zrobić ?
Teraz wynik obliczania procentu jest taki, np. 40, a chciałbym, żeby wypisywało się 40%.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.