Hvordan beregne bestillingsskjema Totals i Javascript

January 20

Javascript er et skriptspråk som brukes til å legge til dynamisk funksjonalitet til nettsider. Javascript er plassert direkte inn i en nettsidens HTML og brukes til å legge til interaktivitet, for eksempel tilbakemeldinger fra brukerne og validering av inndata, til ellers statiske sider. Javascript samhandler også direkte med elementer på en nettside, for eksempel input felt og knapper, slik at den kan brukes til å oppdatere sine attributter. Javascript kan brukes, for eksempel for å holde oversikt over verdiene som er angitt av en bruker, legge dem og gi totalt.

Bruksanvisning

Beregning Bestill Form Totals i Javascript

1 Åpne en teksteditor og opprette en fil med et HTM forlengelse. Denne filen vil inneholde markup (HTML) som definerer form og skjemaets innhold: to felt der brukeren går inn tall, en knapp for å beregne en total basert på de to tallene, og en total felt som holder totalen.

<Html>

</ Html>

2 Legg tre inntastingsfelt til skjemaet. Navn den første inndatafeltet "box1," navngi andre inntastingsfeltet "BOX2" og navngi den tredje inntastingsfeltet "total". Box1 vil holde det første tallet, BOX2 det andre tallet, og totalt vil bli plassert i totalfeltet. Gi input feltene en størrelse på tre og en maksimal lengde på 3.

<Html>

</ Form> </ body>

</ Html>

3 Legg en HTML-knappen til skjemaet. Når klikket, går knappen form og dens elementer (this.form) til en Javascript-funksjon kalt runTotal (). Ring funksjonen med onClick () hendelse og gi knappen et navn ved hjelp av verdi = attributtet.

<Html>

</ Form> </ body>

</ Html>

4 Legg en Javascript-funksjonen (runTotal ()) til HTML <head> seksjonen mellom Javascript <script> og </ script> koder. Denne funksjonen mottar skjemaelementer, legger verdiene av box1 og BOX2 og plasserer resultatet i totalinntastingsfeltet. Bruk forward-merker (//) for å indikere kommentarer.

<Html>

<Head>

funksjon runTotal (MyForm) {

// Koden går her

}

</ Script>

</ Head> <body>

<Form>

</ Form> </ body>

</ Html>

5 Erklærer to variabler og tilordne dem verdiene av box1 og BOX2. Javascript bruker plusstegn (+) for å sette sammen strenger, så bruk Number () -funksjonen for å sikre at Javascript utfører tillegg når du legger til verdiene.

<Html>

<Head>

funksjon runTotal (MyForm) {

// Koden går her

// Erklære variabler og tildele box1 og BOX2.

Var form_field1 = Number (myForm.box1.value);

Var form_field2 = Number (myForm.box2.value);

}

</ Script>

</ Head>

</ Form> </ body>

</ Html>

6 Tilsett de to variable verdier og oppdatere totalfeltet med resultatet.

<Html>

<Head>

funksjon runTotal (MyForm) {

// Koden går her

// Erklære variabler og tildele box1 og BOX2.

Var form_field1 = Number (myForm.box1.value);

Var form_field2 = Number (myForm.box2.value);

// Legger variablene og oppdatere den totale feltverdi med resultatet.

myForm.total.value = form_field1 + form_field2;

}

</ Script>

</ Head>

</ Form> </ body>

</ Html>

7 Åpne HTM siden i en nettleser. Skriv inn et tall i box1, et tall i BOX2, og klikk på knappen for å legge tallene. Den totale vises i totalfeltet.

Hint

Bruk "value = 0" alternativet med box1 og BOX2 å gi dem en initial verdi på 0 når siden lastes.
Legg til litt tekst før den totale feltet for å skille den fra de andre feltene på siden.
Dette Javascript legger to verdier for forenkling. Bruk en løkke og array-verdier for å gjøre koden mer fleksibel.
Prøv å bruke onChange () hendelse på box1 og BOX2 å beregne den totale som brukere legge inn verdier.
Sørg for å bruke Number () -funksjonen til å unngå å lenke sammen verdiene i box1 og BOX2. For eksempel bør tilsetning av 1 og 2 resultere i tre, ikke 12.
Hvis brukeren skriver et tegn i box1 eller BOX2, vil den totale feltet være NaN, eller ikke et tall.