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.