HTML Mit JavaScript rechnen

Jeydane · 12. Dezember 2010

Hi,

meine Aufgabe ist es, eine Tabelle zu erstellen, in der 3 Produkte aufgelistet sind, für die jeweils ein Preis gilt. In einer Spalte kann der User die Menge angeben und mit einem Klick auf "Berechnen" kann der Gesamtpreis sowie andere Werte ermittelt werden.

Dabei muss ich JavaScript benutzen, wobei gleich dort das Problem ist. Ich habe mit einer Tabelle und Formularfeldern gearbeitet und muss diese entsprechend Variablen zuweisen, damit es überhaupt funktioniert. Aber ich komme irgendwie nicht weiter, auch wenn ich verschiedene Seiten gegoogelt habe, die das das Problem mehr oder weniger ansprechen. Leider ist mein Fall etwas spezieller und ich bin nicht fündig geworden oder konnte die Tipps nicht auf meinen Fall übertragen.

Wie müsste nun meine Funktion lauten, um entsprechende Berechnungen durchführen zu können?

PS: Mir ist durchaus klar, dass dieser HTML-Code vor allem subjektiv gesehen in vielen Punkten verbesserungsbedürftig ist...

HTML:

<html>
<head>
<title></title>

<script type="text/javascript">

function calc() {




</script>



</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">


<form name="calc" onClick="calc()">
<table width="75%" border="1" cellpadding="0" cellspacing="2">
 <tr align="center">
  <td>Artikelnummer</td>
  <td>Artikelbild</td>
  <td>Einzelpreis<br>(in €)</td>
  <td>Menge</td>
  <td>Gesamtpreis</td>
 </tr>

 <tr>
  <td>

  <table width="100%" border="0" cellpadding="66" cellspacing="2">
   <tr>
    <td>25684915</td>
   </tr>
   <tr>
    <td>58495126</td>
   </tr>
   <tr>
    <td>12472918</td>
   </tr>
  </table>


  </td>
  <td>

<!--- Produkte --->
  <table width="100%" border="0" cellpadding="0" cellspacing="2">
   <tr>
    <td align="center"><img src="HP-ProBook.jpg" alt="" border="0" width="230" height="150"></td>
   </tr>
   <tr>
    <td align="center"><img src="TECHNICS-SL-1210-MK-II.jpg" alt="" border="0" width="230" height="150"></td>
   </tr>
   <tr>
    <td align="center"><img src="8800gtx.jpg" alt="" border="0" width="230" height="150"></td>
   </tr>
  </table>

<!--- Einzelpreis --->
  </td>
  <td>
   <table width="100%" border="0" cellpadding="65" cellspacing="2">
   <tr>
    <td><input type="text" name="z1" value="700,00" maxlength="6" size="4"</input></td>
   </tr>
   <tr>
    <td><input type="text" name="z2" value="685,00" maxlength="6" size="4"</input></td>
   </tr>
   <tr>
    <td><input type="text" name="z3" value="300,00" maxlength="6" size="4"</input></td>
   </tr>
  </table>
   </td>

<!--- Menge --->
  <td>
  <table width="100%" border="0" cellpadding="65" cellspacing="2">
   <tr>
    <td><input type="text" name="menge1" value="1" maxlength="2" size="2"</input></td>
   </tr>
   <tr>
    <td><input type="text" name="menge2" value="1" maxlength="2" size="2"</input></td>
   </tr>
   <tr>
    <td><input type="text" name="menge3" value="1" maxlength="2" size="2"</input></td>
   </tr>
  </table>

<!--- Gesamntpreis --->
  </td>
  <td>
  <table width="100%" border="0" cellpadding="65" cellspacing="2">
   <tr>
    <td><input type="text" name="ges1" maxlength="4" size="4"</input></td>
   </tr>
   <tr>
    <td><input type="text" name="ges2" maxlength="4" size="4"</input></td>
   </tr>
   <tr>
    <td><input type="text" name="ges3" maxlength="4" size="4"</input></td>
   </tr>
  </table>
  </td>
 </tr>


 <tr>
  <td>Summe (netto)
  <p align="right">MwSt. (19%)</p>
  </td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td align="center">

  <!--- Summe (netto) --->
  <input type="text" name="gesnet" maxlength="5" size="5"</input>

  <!--- Mwst. --->
  <p><input type="text" name="mwst" maxlength="5" size="5"</input></p>
  </td>
 </tr>

 <tr>
  <td>Summe (brutto)
  <p>Versandkosten pauschale</p>
  </td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td align="center">

  <!--- Summe (brutto) --->
  <input type="text" name="gesbrut" maxlength="5" size="5"</input>

  <!--- Versandkosten pauschale --->
  <p><input type="text" name="versand" maxlength="5" size="5" value="6,00"</input></p>
  </td>
 </tr>

 <tr>
  <td>Überweisungsbetrag</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td align="center">

  <!--- Überweisungsbetrag/Gesamtbetrag --->
  <input type="text" name="gesbetrag" maxlength="5" size="5"</input></td>
 </tr>

</table>
<p><input type="button" value="Berechne" onClick="calc()"></p>
</form>




</body>
</html>

Hancock · 12. Dezember 2010

Also bevor du anfängst: Bitte mal bei den Inputs ein paar ">" vor den "</input>" einfügen.
Dann vom Prinzip:

Code:

var t=z1.Value*menge1.Value;
t+=z2.Value*menge2.Value;
t+=z3.Value*menge3.Value;
gesbetrag.Value=t;

EDIT:
Wie ist eigentlich dein Tabellenlayout? Geschachtelt für so ne klare struktur?
Dann nicht in der Form onclick, dort eher onsubmit oder beim Button onclick.
Bei deinem calc fehlt ein "}"

Jeydane · 12. Dezember 2010

Blitzmerker schrieb:
Also bevor du anfängst: Bitte mal bei den Inputs ein paar ">" vor den "</input>" einfügen.
Dann vom Prinzip:

Code:

var t=z1.Value*menge1.Value; t+=z2.Value*menge2.Value; t+=z3.Value*menge3.Value; gesbetrag.Value=t;

EDIT:
Wie ist eigentlich dein Tabellenlayout? Geschachtelt für so ne klare struktur?
Dann nicht in der Form onclick, dort eher onsubmit oder beim Button onclick.
Bei deinem calc fehlt ein "}"

Habe die fehlenden ">" hinzugefügt, das waren "dumme" Fehler. Werde es mit deinem Muster versuchen, aber habe trotzdem eine Frage: Muss ich der Funktion nicht sagen, wo es z1, z2, z3 etc. findet?

Hancock · 12. Dezember 2010

Also bei schon im HTML gesetzte name="" und id="" "erkennt" Javascript die Elemente. Sonst musste halt über document.getElementsByName() oder getElementById oder document.forms[0] zugreifen.

Suche

HTML Mit JavaScript rechnen

Jeydane

Gast

Hancock

Captain

Jeydane

Gast

Hancock

Captain

Ähnliche Themen