Hvordan beregne en Moving Total i Javascript

Javascript er en klient-side skriptspråk som lar deg reagere i sanntid til brukerundersøkelser. For eksempel kan du lage et HTML-skjema som automatisk oppdaterer en total felt som bruker justerer enkeltoppføringer på skjemaet. For å gjøre dette, må du tilordne et navn til hvert skjema element, skrive en funksjon som oppdaterer totalt og kaller funksjonen hver gang ett av elementene endres.

Bruksanvisning

1 Opprett en ny HTML-dokument med Notepad eller en HTML-editor. Input HTML overskrifter i dokumentet:

<! DOCTYPE HTML>

<Html lang = "no">

<Head>

<Meta charset = "utf-8">

<Title> Bestillingsskjema </ title>

2 Lag styling for innspill skjemaet du vil skape:

<Style>

.orderForm {width: 250px; display: block; }

.item {width: 100px; float: left; margin-left: 10px; text-align: right}

.input {width: 50 piksler; margin-left: 10px; text-align: left}

.total {width: 20px; margin-left: 10px; font-weight: bold; }

</ Style>

3 Opprett en Javascript-funksjonen for å få tilgang til hvert element i papirform og beregne og vise en total:

<Script>

funksjon total () {

var total = (parseInt(document.order.apples.value) || 0)*1.05 + (parseInt(document.order.oranges.value) || 0)*1.10 + (parseInt(document.order.pears.value) || 0)*0.88;

. Document.getElementById ( "total") innerhtml = totalt;

}

</ Script>

</ Head>

4 Lag HTML innspill form. Gi navnet du brukte i Javascript-funksjonen til hvert enkelt element. Sett "OnChange" hendelse for hver inngang element for å beregne og vise den totale Når et element endringer:

<Body>

<Div class = "Bestillingsskjema">

<Form name = "orden" action = "process.php" method = "post">

<Span class = "element"> Epler: 1.05 </ span> <input type = "text" class = "input" name = "epler" OnChange = "total ()">

<Span class = "element"> Appelsiner: 1,10 </ span> <input type = "text" class = "input" name = "appelsiner" OnChange = "total ()">

<Span class = "element"> Pærer: 0,88 </ span> <input type = "text" class = "input" name = "pærer" OnChange = "total ()">

<Span class = "element"> Totalt: </ span> <span class = "total" id = "total"> </ span>

</ Form>

</ Div>

</ Body>

</ Html>

5 Lagre HTML-fil og åpne den i en nettleser. Test at beregningen fungerer riktig.