Rahmenbedingungen
Browser & Betriebssystem: Firefox 43.0.4,Windows 7
Editor: Microsoft Expression Web 4
Meine Kenntnisse zum Thema Webseitenerstellung: totaler Anfänger
Ich verfüge nicht über PHP und MySQL.
Hallo ihr lieben!
Ich habe große Probleme bei der Erstellung des Webshops und hoffe, dass ihr mir helfen könnt.
Problembeschreibung
Fehlermeldung/-beschreibung: Wir sollen für die Uni in einer Gruppe einen Webshop erstellen. Der Webshop soll jedoch nicht als richtige Webseite online gehen. Wir sollen ihn nur erstellen. Ich bin für die Funktionen des Warenkorbs zuständig. Mein Warenkorb soll später so aussehen, dass ein Kunde seine Lieferdaten, die gewünschte Zahlungsoption, die Anzahl der Artikelt im Warenkorb über ein Formular übermittelt und meine E-Mail-Adresse weitergeleitet werden.
Hier habe ich mehrere Probleme. Eines dieser Probleme ist, dass ich einen Plus- und Minusbutton für jedes unserer vier Produkte erstellen möchte, welche die aktuelle Anzahl der Artikel im Warenkorb um eins erhöhrt bzw. um eins verringert.
Der InternetExplorer kann meine bereits erstellte Funktion gar nicht umsetzen. Firefox setzt die Funktionen der Plus- und Minusbuttons um, erzeugt jedoch folgende Fehler:
a) Wenn ich auf den Plusbutton klicke, dann wird die Anzahl des gewählten Artikels um eins erhöht. Wenn ich jetzt aber auf den Minusbutton klicke, dann wird die Anzahl des Artikels zunächst ebenso um den Wert eins erhöht. Erst beim zweiten Klick auf den Minusbutton, wird der Wert des Artikels gesenkt.
b) Analog zum ersten Problem (nur umgekehrt): Wenn ich auf den Minusbutton klicke, dann wird die Anzahl des
gewählten Artikels um eins gesenkt. Wenn ich jetzt aber auf den Plusbutton klicke, dann wird die Anzahl des Artikels zunächst ebenso um
den Wert eins gesenkt. Erst beim zweiten Klick auf den Plusbutton, wird
der Wert des Artikels erhöht.
Ich habe tagelang nach den Fehlern gesucht. Da ich jedoch wirklich nur einige wenige Kenntnisse zu HTML und Java-Script habe, konnte ich den Fehler nicht finden. Auch die Recherche hierzu in verschiedenen Foren brachte mir keine Lösung für mein Problem.
Ich suche also nach einer Lösung, welche nicht Browserabhängig ist und ebenso den Fehler bezüglich der Erhöhung und der Senkung der Artikelanzahl beseitigt.
(Die eigentliche Formattierung des Webshops bezüglich des Layouts habe ich nur für mich erstellt. Sobald die Funktionen innerhalb des Webshops funktionieren, werde ich diese an das Gruppenmitglied weiterreichen, welches mit CSS arbeitet.)
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<title> WEINFIRMA</title>
<meta charset="utf-8" />
<meta name="keywords" content="Rotwein, Weißwein" />
<meta name="Beschreibung" content="Das ist ein HTML5-Beispiel" />
<link rel="stylesheet" href="mystyles.css">
</head>
<body bgcolor="#66CCFF">
<header>
<table>
<tr>
<td width="130">
<img src="" alt="Logo_Weinfirma" width="100">
</td>
<td> <h1> WEIN - Warenkorb </h1> </td>
</tr>
</table>
</header>
<!---------------------------------------------------------------------------------------------------------------------------------------->
<!-- NAVIGATION -->
<nav>
<table>
<tr>
<td width="90"> <a href="../../../../Desktop/Webseite/Startseite.html"> Startseite </a> </td>
<td width="130"> <a href=""> Reiter1 </a> </td>
<td width="90"> <a href=""> Reiter2 </a> </td>
<td width="90"> <a href=""> Reiter3 </a> </td>
<td width="90"> <a href=""> Reiter4 </a> </td>
<td width="130"> <a href=""> Reiter5</a></td>
<td width="90"> <input autocomplete="off" tabindex="1" placeholder="Suchbegriff" name="search" title="SELFHTML-Wiki durchsuchen [alt-shift-f]" accesskey="f" id="searchInput" type="search"> </td>
</tr>
</table>
</nav> <br />
<!---------------------------------------------------------------------------------------------------------------------------------------->
<!-- TEST FORMATVORLAGE-->
<style>
body {
SCROLLBAR-FACE-COLOR: #666666;
SCROLLBAR-HIGHLIGHT-COLOR: #333333;
SCROLLBAR-SHADOW-COLOR: #333333;
SCROLLBAR-3DLIGHT-COLOR: #344556;
SCROLLBAR-ARROW-COLOR: #fefefe;
SCROLLBAR-TRACK-COLOR: #000011;
SCROLLBAR-DARKSHADOW-COLOR: #333333;
}
input, textarea, select {
border: 2px solid #333333;
background: #FFFFFF;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
td {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
</style>
<!---------------------------------------------------------------------------------------------------------------------------------------->
<!-- BESTELLFORMULAR -Übersicht Warenkorb-->
<form name="Warenkorb" method="post">
<!---------------------------------------------------------------------------------------------------------------------------------------->
<!-- JAVA SCRIPT -->
<script type="text/javascript">
var RotweinA = 0;
var RotweinB = 0;
var WeissweinA = 0;
var WeissweinB = 0;
</script>
<label><b>Warenkorb</b></label>
<table>
<tr>
<td>
Produktname
</td>
<td>
Produktanzahl
</td>
<td>
Produktpreis
</td>
<td></td>
</tr>
<tr>
<td>
Rotwein 1
</td>
<td>
<input type="text" name="anzahl_rotwein1" readonly="readonly" value="0" />
</td>
<td>
<script>
var preis_rotwein1 = 18;
document.write(preis_rotwein1 + "€/Flasche");
</script>
</td>
<td>
<input type="button" name="Button1" value="+" onclick="this.form.anzahl_rotwein1.value = RotweinA++" />
<input type="button" name="Button2" value="-" onclick="this.form.anzahl_rotwein1.value = RotweinA--" />
</td>
</tr>
<tr>
<td>
Rotwein 2
</td>
<td>
<input type="text" name="anzahl_rotwein2" readonly="readonly" value="0" />
</td>
<td>
<script>
var preis_rotwein2 = 12;
document.write(preis_rotwein2 + "€/Flasche");
</script>
</td>
<td>
<input type="button" name="Button3" value="+" onclick="this.form.anzahl_rotwein2.value = RotweinB++" />
<input type="button" name="Button4" value="-" onclick="this.form.anzahl_rotwein2.value = RotweinB--" />
</td>
</tr>
<tr>
<td>
Weißwein 1
</td>
<td>
<input type="text" name="anzahl_weisswein1" readonly="readonly" value="0" />
</td>
<td>
<script>
var preis_weisswein1 = 21;
document.write(preis_weisswein1 + "€/Flasche");
</script>
</td>
<td>
<input type="button" name="Button5" value="+" onclick="this.form.anzahl_weisswein1.value = WeissweinA++" />
<input type="button" name="Button6" value="-" onclick="this.form.anzahl_weisswein1.value = WeissweinA--" />
</td>
</tr>
<tr>
<td>
Weißwein 2
</td>
<td>
<input type="text" name="anzahl_weisswein2" readonly="readonly" value="0" />
</td>
<td>
<script>
var preis_weisswein2 = 13;
document.write(preis_weisswein2 + "€/Flasche");
</script>
</td>
<td>
<input type="button" name="Button7" value="+" onclick="this.form.anzahl_weisswein2.value = WeissweinB++" />
<input type="button" name="Button8" value="-" onclick="this.form.anzahl_weisswein2.value = WeissweinB--" />
</td>
</tr>
</table>
<br /> <input type="submit" value="Bestellvorgang fortsetzen">
</form>
<footer>
Copyright © 2015
Impressum
Kontakt
</footer>
</body>
</html>
Alles anzeigen
Über eure Hilfe würde ich mich sehr freuen!