Zaloguj się

[email protected] · 01-04-2013, 17:21

Witam. Właśnie zacząłem się uczyć js, ale mam problem z stworzeniem kalkulatora. Czy mógłby ktoś mi podpowiedzieć co powinienem poprawić w moim kodzie? Proszę o wyrozumiałość, i wytłumaczenie co jest źle dlaczego, i jak powinno wyglądać. tak łopatolgicznie jeśli można. w zasadzie we wszystkich językach zaczynam się gubić przy funkcjach. Próbuje to zrozumieć, ale i tak mi nie wychodzi. Może ktoś da radę mi wytłumaczyć. A o to kod:

<html>
<head>
<script type="text/javascript">
var rozwiazanie=top.document.calc.wynik.value;
var plusik=top.document.calc.wybor.plus;
var minusik=top.document.calc.wybor.minus;
var mnoznik=top.document.calc.wybor.mnozenie;
var dzielnik=top.document.calc.wybor.dzielenie;
function dodawanie(){var pluss1=top.document.calc.liczba1.value;
var pluss2=top.document.calc.liczba2.value;
var pluss=pluss1+pluss2;
return pluss;}
function odejmowanie(){var minuss1=top.document.calc.liczba1.value;
var minuss2=top.document.calc.liczba2.value;
var minuss=minuss1-minuss2;
return minuss;}
function iloczyn(){var iloczynn1=top.document.calc.liczba1.value;
var iloczynn2=top.document.calc.liczba2.value;
var iloczynn=iloczynn1*iloczynn2;
return iloczynn;}
function iloraz(){var ilorazz1=top.document.calc.liczba1.value;
var ilorazz2=top.document.calc.liczba2.value;
var ilorazz=ilorazz1/ilorazz2;
return ilorazz}
function licz(){
switch(top.document.calc.wybor){
case plusik: rozwiazanie=dodawanie();
return rozwiazanie;
break;
case minusik: rozwiazanie=odejmowanie();
return rozwiazanie;
break;
case mnoznik: rozwiazanie=iloczyn();
return rozwiazanie;
break;
case dzielnik: rozwiazanie=iloraz();
return rozwiazanie;
break;
}

}
</script>
</head>
<body>
<form name="calc" enctype="text/plain" action="" method="post">
<input type="number" name="liczba1" value="">
<input type="number" name="liczba2" value="">
<select name="wybor">
<option value="plus" selected>+</option>
<option value="minus">-</option>
<option value="mnozenie">*</option>
<option value="dzielenie">/</option>
</select>
<input type="button" value="oblicz" onclick="licz()">
<input type="number" name="wynik" value="">
</form>
</body>
</html>

**Kartofelek** · 02-04-2013, 14:54

No niby jest ok, chociaż trochę namąciłeś.
Osobiście wydaje mi się, że lepiej zrobić kilka guzików plus, minus, mnozenie, dzielenie. I kazdemu z nich podpiac kazda funkcje.

Przeczytaj to:
http://doman.art.pl/kursjs/kurs/function.html Jak nie załapiesz daj znać, bo to będzie oznaczało, że trzeba zmienić.

[email protected] · 06-04-2013, 23:59

Dobra. Mam coś takiego.
<html>
<head>
<script type="text/javascript">
var a=eval(document.calc.liczba1.value);
var b=eval(document.calc.liczba2.value);
function dodawanie(){
wynik=a+b;
document.calc.wynik.value=wynik;
}
function odejmowanie(){
wynik=a-b;
document.calc.wynik.value=wynik;
}
function iloczyn(){
wynik=a*b;
document.calc.wynik.value=wynik;
}
function iloraz(){
wynik=a/b;
document.calc.wynik.value=wynik;
}
</script>
</head>
<body>
<form name="calc">
<input type="text" name="liczba1" value=""></input>
<input type="text" name="liczba2" value=""></input>
<input type="button" value="+" onclick="dodawanie()"/>
<input type="button" value="-" onclick="odejmowanie()"/>
<input type="button" value="*" onclick="iloczyn()"/>
<input type="button" value="/" onclick="iloraz()"/>
<input type="text" name="wynik"/>
</form>
</body>
</html>
Jeszcze kłopot jest chyba z funkcją globalną. Nie bardzo wiem o co się rozchodzi. Przed funkcjami są dwie zmienne globalne zadeklarowane, więc funkcje powinny mieć z czego pobierać dane. A mimo to nic z tego nie wychodzi. A jak zamiast takich dwóch zmiennych globalnych, w każdą z funkcji wpiszę te zmienne jako lokalne:
a=eval(document.calc.liczba1.value);
b=eval(document.calc.liczba2.value);
to wtedy działa. Co jest grane z tymi zmiennymi?

**Kartofelek** · (Ten post był ostatnio modyfikowany: 07-04-2013, 03:25 przez Kartofelek.)

Zle.
Pamiętaj o 2 rzeczach:
1) staraj się rozbijać funkcje tak by robiły konkretne zadania. Ale ten punkt nie jest bardzo wymagany
2) Podpinasz zdarzenie pod guzik. Po jego kliknięciu wywołujesz funkcję, która pobiera AKTUALNE dane, po czym wykonujesz przeliczenie i pokazanie wyniku.

Kod:
<form name="calc">

  <div>

    <input type="text" name="liczba1" id="liczba1"></input>

    <input type="text" name="liczba2" id="liczba2"></input>

    <input type="button" id="dodawanie" value="+" />

    <input type="button" id="odejmowanie" value="-" />

    <input type="text" name="wynik" id="wynik" />

  </div>

</form>

<script type="text/javascript">

  //dla nie powtarzania kodu, robię funkcję-selektor

  function $(id) {

     return document.querySelector(id);

  }

  function dodawanie(liczba1, liczba2) {

     return Number(liczba1) + Number(liczba2)

  }

  function odejmowanie(liczba1, liczba2) {

     return Number(liczba1) - Number(liczba2)

  }

  function pokazDodawanie() {

     var liczba1 = $('#liczba1').value;

     var liczba2 = $('#liczba2').value;

     console.log('s')

     $('#wynik').value = dodawanie(liczba1, liczba2);

  }

  function pokazOdejmowanie() {

     var liczba1 = $('#liczba1').value;

     var liczba2 = $('#liczba2').value;

     console.log('ss')

     $('#wynik').value = odejmowanie(liczba1, liczba2);

  }

  //podpinam zdarzenia

  $('#dodawanie').onclick = pokazDodawanie;

  $('#odejmowanie').onclick = pokazOdejmowanie;

</script>

ferrante · 18-05-2013, 21:17

Tutaj znajdziesz prosty kalkulator i przy okazji nauczysz się chainingu: http://ferrante.pl/frontend/javascript/na-czym-polega-chaining-w-javascript/

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie