Problem z Java Script i HTML

[Dominick]

Chciałbym zrobić kalkulator na strone w JavaScript.

Jestem zielony w JavaScriptach.. znam tylko podstawy takie, że trzeba zrobić funkcje w sekcji head i podstawić ją pod body.

 

Kalkulator musi wyglądać następująco:

 

pierwszy input type text (tutaj wpisuje się pierwszą liczbę)

obok niego działania ale w inpucie typu select czyli rozwijana lista +,-,*,/ czyli proste 4 działania.

obok następny input typu text gdzie wpisuje się 2ga liczbę.

znak równa się będzie na stałe a obok niego ma pojawiać się wynik ale nie jako input tylko większy i niebieski.

wiem, że trzeba użyć inner HTML ale nie wiem jak się do tego zabrać. pod tym wszystkim ma być button z napisem Oblicz.

 

Czy ktoś kumaty w tych sprawach mógłby mi pomóc ze stworzeniem tego kalkulatora?

[Dominick]

oto kod:

var liczba1;

var liczba2;

var wynik;

function plus() {

 

document.a.wynik.value=parseFloat(document.a.liczba1.value)+parseFloat(document.a.liczba2.value) ;

 

}

 

function minus() {

document.a.wynik.value=parseFloat(document.a.liczba1.value)-parseFloat(document.a.liczba2.value)

}

 

function razy() {

document.a.wynik.value=parseFloat(document.a.liczba1.value)*parseFloat(document.a.liczba2.value) ;

 

}

 

function podziel() {

document.a.wynik.value=parseFloat(document.a.liczba1.value)/parseFloat(document.a.liczba2.value)

}

function oblicz() {

document.a.wynik.value=parseFloat(document.a.liczba1.value)+parseFloat(document.a.liczba2.value)

 

}

[3Jane]

Szczerze mówiąc, o wiele łatwiej robi się takie rzeczy przy wykorzystaniu jakiejś gotowej biblioteki - a to dlatego, że człowiek nie natyka się na problemy z niekompatybilnościami pomiędzy przeglądarkami.

 

Do zastosowań "ad hoc" bardzo wygodny jest framework jQuery, do którego istnieje wiele gotowych skryptów.

Tutaj można dostać framework:

http://jquery.com/

 

A tutaj sobie ktoś napisał ładny kalkulator, który odpala się po kliknięciu na pole tekstowe:

http://keith-wood.name/calculator.html

 

Jeśli jednak będziesz pisać samodzielnie, to przypomnij mi, żebym ci napisała, czemu .innerHtml może powodować problemy :)

[Dominick]

niestety muszę zrobić tak jak napisałem. na stronie będzie tylko ten kalkulator i może działać tylko w jednej wybranej przeglądarce z tym nie ma problemu.

proszę tylko o pomoc z funkcjami bo sie pogubiłem i nie mam pomysłu

[Sayja]

gdzie jest dokładnie problem?

[Dominick]

problem dokładnie jest z funkcją oblicz();

 

nie mam pomysłu jak zrobić aby:

po naciśnięciu przycisku "oblicz" na liczbe1 i liczbe2 zadzialalo "dzialanie" ktore wybralem z rozwijanego menu a wynik pojawil sie w divie.

[Sayja]

Przypisz do przycisku event onclick odpalający funkcję główną, zbierz value1, value2 i value z selecta oznaczającego typ działania. Teraz ustawiasz warunki(Switch) i odpalasz odpowiednią funkcję zależnie od typu działania. Nie dam głowy, ale może da się to zrobić sprytnie, składniowo ewaluując po prostu liczba1 - działanie - liczba2.

Dokładnie Ci nie powiem bo programuję w jquery i nie jestem już pewien jak się lata w normalnym js po DOMie.

[Dominick]

Nie bardzo wiem o co Ci chodzi..

to mój pokićkany kod kalkulatora, który nie działa..

może zerkniesz i powiesz

 

 

 

 

 

var liczba1;

var liczba2;

var wynik;

function plus() {

 

document.a.wynik.value=parseFloat(document.a.liczba1.value)+parseFloat(document.a.liczba2.value) ;

 

}

 

function minus() {

document.a.wynik.value=parseFloat(document.a.liczba1.value)-parseFloat(document.a.liczba2.value)

}

 

function razy() {

document.a.wynik.value=parseFloat(document.a.liczba1.value)*parseFloat(document.a.liczba2.value) ;

 

}

 

function podziel()

{

document.a.wynik.value=parseFloat(document.a.liczba1.value)/parseFloat(document.a.liczba2.value)

}

function oblicz()

{

wynik=document.a.wynik.value;

dzialanie=document.a.selectedIndex;

document.a.wynik.value=parseInt(document.a.liczba1.value)+dzialanie+parseInt(document.a.liczba2.value);

 

 

document.getElementsById('wyn').innerHTML=wynik;

}

 

 

.div1

{

background-color:#06F;

border-style:outset;

border-color: #03F;

z-index:3;

position:absolute;

width:653px;

height:200px;

left:350px;

top: 100px;

}

 

.div3

{

background-color: #999;

position:absolute;

width:750px;

height:150px;

top:30px;

left:300px;

z-index:1;

}

.tyt

{

font-size:35px;

font: Arial, Helvetica, sans-serif;

position:absolute;

color:#FFF;

left:560px;

top: 50px;

z-index:3;

}

.input1

{

background-color:#003;

font-size:16px;

color:#FFF;

z-index:10;

position:absolute;

top:90px;

left:4px;

border-color:#03F;

 

}

.select1

{

background-color:#003;

font-size:16px;

color:#FFF;

z-index:10;

position:absolute;

top:90px;

left:100px;

border-color:#03F;

}

.input2

{

background-color:#003;

font-size:16px;

color:#FFF;

z-index:10;

position:absolute;

top:90px;

left:150px;

border-color:#03F;

 

}

.txt

{

color:#FFF;

font-size:24px;

position:absolute;

top:90px;

left:250px;

z-index:10;

}

.wynik

{

background-color:#003;

border:inset;

border-color:#03f;

color:#0CF;

font-size:30px;

width:360px;

height:40px;

z-index:10;

position:absolute;

top:80px;

left:280px;

}

.oblicz

{

background-color:#C00;

border-color:#900;

color:#FFF;

z-index:10;

position:absolute;

top:160px;

left:20px;

width: 135px;

}

 

KALKULATOR

+

-

*

/

=

 

Oblicz