|
Erstelle mit einer Tabelle ein 4-zeiliges Rechnungsformular.
Anzahl, Artikel und Einzelpreis sollen einzugeben sein. Die
Artikelsumme, die Gesamtsummer und die Mehwertsteuer sollen berechnet
und formatiert ausgegeben werden.
|
| |
|
|
Code1
Hier wird erstmal nur das Formular erstellt.
|
|
<form name="f">
<table border="1" style="BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #cccccc; width:600px;">
<tr><td colspan=4 style="font-size:24pt;text-align:center;">Rechnungsformular</td></tr>
<tr>
<th>Anzahl</th><th>Artikel</th><th>Einzelpreis</th><th>Summe</th>
</tr>
<tr>
<td><input type="text" name="anzahl1" size="3" /></td>
<td><input type="text" name="artikel1" size="50" /></td>
<td><input type="text" name="preis1" size="10" /></td>
<td><input type="text" name="summe1" size="10" /></td>
</tr>
<tr>
<td><input type="text" name="anzahl2" size="3" /></td>
<td><input type="text" name="artikel2" size="50" /></td>
<td><input type="text" name="preis2" size="10" /></td>
<td><input type="text" name="summe2" size="10" /></td>
</tr>
<tr>
<td><input type="text" name="anzahl3" size="3" /></td>
<td><input type="text" name="artikel3" size="50" /></td>
<td><input type="text" name="preis3" size="10" /></td>
<td><input type="text" name="summe3" size="10" /></td>
</tr>
<tr>
<td><input type="text" name="anzahl4" size="3" /></td>
<td><input type="text" name="artikel4" size="50" /></td>
<td><input type="text" name="preis4" size="10" /></td>
<td><input type="text" name="summe4" size="10" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="berechnen" onclick="berechnen();"/></td>
<td>MWST:<br /><input type="text" name="mwst" size="10" /></td>
<td>Endsumme:<br /><input type="text" name="endsumme" size="10" /></td>
</tr>
</table>
</form>
|
|
Code2
Die benötigte Javascriptfunktion.
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel</title>
</head>
<body>
Erstelle mit einer Tabelle ein 4-zeiliges
Rechnungsformular. Anzahl, Artikel und Einzelpreis sollen einzugeben
sein. Die Artikelsumme, die Gesamtsummer und die Mehwertsteuer sollen
berechnet und formatiert ausgegeben werden.
parseFloat() wandelt die Eingabe in eine Kommazahl um.
<form name="f">
<table border="1" style="BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #cccccc; width:600px;">
<tr><td colspan=4 style="font-size:24pt;text-align:center;">Rechnungsformular</td></tr>
<tr>
<th>Anzahl</th><th>Artikel</th><th>Einzelpreis</th><th>Summe</th>
</tr>
<tr>
<td><input type="text" name="anzahl1" size="3" /></td>
<td><input type="text" name="artikel1" size="50" /></td>
<td><input type="text" name="preis1" size="10" /></td>
<td><input type="text" name="summe1" size="10" /></td>
</tr>
<tr>
<td><input type="text" name="anzahl2" size="3" /></td>
<td><input type="text" name="artikel2" size="50" /></td>
<td><input type="text" name="preis2" size="10" /></td>
<td><input type="text" name="summe2" size="10" /></td>
</tr>
<tr>
<td><input type="text" name="anzahl3" size="3" /></td>
<td><input type="text" name="artikel3" size="50" /></td>
<td><input type="text" name="preis3" size="10" /></td>
<td><input type="text" name="summe3" size="10" /></td>
</tr>
<tr>
<td><input type="text" name="anzahl4" size="3" /></td>
<td><input type="text" name="artikel4" size="50" /></td>
<td><input type="text" name="preis4" size="10" /></td>
<td><input type="text" name="summe4" size="10" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="berechnen" onclick="berechnen();"/></td>
<td>MWST:<br /><input type="text" name="mwst" size="10" /></td>
<td>Endsumme:<br /><input type="text" name="endsumme" size="10" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
function berechnen()
{
anz1=parseFloat(document.f.anzahl1.value);
preis1=parseFloat(document.f.preis1.value);
summe1=anz1*preis1;
document.f.summe1.value=summe1;
anz2=parseFloat(document.f.anzahl2.value);
preis2=parseFloat(document.f.preis2.value);
summe2=anz2*preis2;
document.f.summe2.value=summe2;
anz3=parseFloat(document.f.anzahl3.value);
preis3=parseFloat(document.f.preis3.value);
summe3=anz3*preis3;
document.f.summe3.value=summe3;
anz4=parseFloat(document.f.anzahl4.value);
preis4=parseFloat(document.f.preis4.value);
summe4=anz4*preis4;
document.f.summe4.value=summe4;
endsumme=summe1+summe2+summe3+summe4;
document.f.endsumme.value=endsumme;
mwst=endsumme*0.2;
document.f.mwst.value=mwst;
}
</script>
</body>
</html>
|
|
Code3
Die Funktion mit Arrays etwas eleganter gestaltet.
|
|
<form name="f">
<table border="1" style="BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #cccccc; width:600px;">
<tr><td colspan=4 style="font-size:24pt;text-align:center;">Rechnungsformular</td></tr>
<tr>
<th>Anzahl</th><th>Artikel</th><th>Einzelpreis</th><th>Summe</th>
</tr>
<tr>
<td><input type="text" name="anzahl1" size="3" /></td>
<td><input type="text" name="artikel1" size="50" /></td>
<td><input type="text" name="preis1" size="10" /></td>
<td><input type="text" name="summe1" size="10" /></td>
</tr>
<tr>
<td><input type="text" name="anzahl2" size="3" /></td>
<td><input type="text" name="artikel2" size="50" /></td>
<td><input type="text" name="preis2" size="10" /></td>
<td><input type="text" name="summe2" size="10" /></td>
</tr>
<tr>
<td><input type="text" name="anzahl3" size="3" /></td>
<td><input type="text" name="artikel3" size="50" /></td>
<td><input type="text" name="preis3" size="10" /></td>
<td><input type="text" name="summe3" size="10" /></td>
</tr>
<tr>
<td><input type="text" name="anzahl4" size="3" /></td>
<td><input type="text" name="artikel4" size="50" /></td>
<td><input type="text" name="preis4" size="10" /></td>
<td><input type="text" name="summe4" size="10" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="berechnen" onclick="berechnen();"/></td>
<td>MWST:<br /><input type="text" name="mwst" size="10" /></td>
<td>Endsumme:<br /><input type="text" name="endsumme" size="10" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
function berechnen()
{
anzahl=new Array();
preis=new Array();
summe=new Array();
endsumme=0;
for(i=1;i<=4;i++)
{
anzahl[i]=document.getElementsByName("anzahl"+i)[0].value;
preis[i]=document.getElementsByName("preis"+i)[0].value;
summe[i]=parseFloat(anzahl[i])*parseFloat(preis[i]);
document.getElementsByName("summe"+i)[0].value=summe[i];
endsumme+=summe[i];
}
document.f.endsumme.value=endsumme;
mwst=endsumme*0.2;
document.f.mwst.value=mwst;
}
</script>
|
|
Code4
In diesem Beispiel wird das gesamte Formular dynamisch ausgeben. Die Anzahl der Zeilen wird in der Variablen zeilen festgelegt.
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel</title>
</head>
<body>
<script type="text/javascript">
zeilen=20;
s="<form name='f'><table border='1' style='BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #cccccc; width:600px;'>";
s+="<tr><td colspan=4 style='font-size:24pt;text-align:center;'>Rechnungsformular</td></tr>";
s+="<tr><th>Anzahl</th><th>Artikel</th><th>Einzelpreis</th><th>Summe</th></tr>";
for(i=1;i<=zeilen;i++)
{
n="anzahl"+i;
s+="<tr><td><input type='text' name="+n+" size='3' /></td>";
s+="<td><input type='text' size='50' /></td>";
n="preis"+i;
s+="<td><input type='text' name="+n+" size='10' /></td>";
n="summe"+i;
s+="<td><input type='text' name="+n+" size='10' /></td></tr>";
}
s+="<tr><td></td><td><input type='button' value='berechnen' onclick='berechnen();'/></td>";
s+="<td>MWST:<br /><input type='text' name='mwst' size='10' /></td>";
s+="<td>Endsumme:<br /><input type='text' name='endsumme' size='10' /></td></tr>";
s+="</table></form>";
document.write(s);
function berechnen()
{
anzahl=new Array();
preis=new Array();
summe=new Array();
endsumme=0;
for(i=1;i<=zeilen;i++)
{
anzahl[i]=document.getElementsByName("anzahl"+i)[0].value;
preis[i]=document.getElementsByName("preis"+i)[0].value;
if(parseFloat(anzahl[i])*parseFloat(preis[i])>0)
{
summe[i]=parseFloat(anzahl[i])*parseFloat(preis[i]);
} else summe[i]=0;
document.getElementsByName("summe"+i)[0].value=summe[i];
endsumme+=summe[i];
}
document.f.endsumme.value=endsumme;
mwst=endsumme*0.2;
document.f.mwst.value=mwst;
}
</script>
</body>
</html> |
|
JavaScript-Interaktiv von Ulrich Hirschmann