Sponsor-Board.de

Normale Version: *gelöst* Frage zu Problem bei Javascript
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Sorry, dass ich dich habe warten lassen

Zitat:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859">
<title>Pizza Service</title>
<link rel="stylesheet" type="text/css" href="Layout.css">
</head>
<form action="Pizzashop.html" method="get">
<script>

function Bestellung()
{
var Size = document.getElementsByName("Size")[0].value;
var Pizza = document.getElementsByName("Pizza")[0].value;

if (Pizza == "Individuelle")
{
if(document.getElementsByName("Belag1")[0].checked)
{
var Belag1 = document.getElementsByName("Belag1")[0].value;
}
else
{
var Belag1 = "";
}

if(document.getElementsByName("Belag2")[0].checked)
{
var Belag2 = document.getElementsByName("Belag2")[0].value;
}
else
{
var Belag2 = "";
}

if(document.getElementsByName("Belag3")[0].checked)
{
var Belag3 = document.getElementsByName("Belag3")[0].value;
}
else
{
var Belag3 = "";
}

if(document.getElementsByName("Belag4")[0].checked)
{
var Belag4 = document.getElementsByName("Belag4")[0].value;
}
else
{
var Belag4 = "";
}
}

var Name = document.getElementsByName("Name")[0].value;
var Vorname = document.getElementsByName("Vorname")[0].value;
var Straße = document.getElementsByName("Straße")[0].value;
var PLZ = document.getElementsByName("PLZ")[0].value;
var Ort = document.getElementsByName("Ort")[0].value;

if (Vorname == "" )
if (Pizza == "Individuelle")
{
window.alert("Hallo Frau/Herr, \n\n"+Vorname+" "+Name+"\n"+Straße+"\n"+PLZ+" "+Ort+"\n\nSie haben folgende Pizza gewählt:\n\nGröße: "+Size+"\nArt der Pizza: Individuelle \nBelag: "+Belag1+" "+Belag2+" "+Belag3+" "+Belag4+"");
}
else
{
window.alert("Hallo Frau/Herr, \n\n"+Vorname+" "+Name+"\n"+Straße+"\n"+PLZ+" "+Ort+"\n\nSie haben folgende Pizza gewählt:\n\nGröße: "+Size+"\nArt der Pizza: "+Pizza+"");
}
}
</script>

<body>
<h3>WWW-Pizza Service</h3>
<p>
<u>Bestellung:</u>
<table border="0">
<tr bgcolor = 'skyblue'>
<td>
Größe
</td>
<td>
<input type="radio" name="Size" value="klein (20 cm)">klein (20 cm)<br>
<input type="radio" name="Size" value="mittel (24 cm)" checked>mittel (24 cm)<br>
<input type="radio" name="Size" value="groß (28 cm)">groß (28 cm)<br>
</td>
</tr>
<tr bgcolor = 'lightgreen'>
<td>
Art der Pizza
</td>
<td>
<input type="radio" name="Pizza" value="Tonno">Tonno (Thunfisch, Zwiebel)<br>
<input type="radio" name="Pizza" value="Quattro" checked>Quattro (Salami, Schinken)<br>
<input type="radio" name="Pizza" value="Italia">Italia (Schinken, Artischoke)<br>
</td>
</tr>
<tr bgcolor = 'lightblue'>
<td>
</td>
<td>
<input type="radio" name="Pizza" value="Individuelle">Individuelle Zusammenstellung<br>
<input type="checkbox" name="Belag1" value="Salami">Salami<br>
<input type="checkbox" name="Belag2" value="Schinken">Schinken<br>
<input type="checkbox" name="Belag3" value="Champignon">Champignon<br>
<input type="checkbox" name="Belag4" value="Käse">Käse<br>
</td>
</tr>
<tr bgcolor = 'lightyellow'>
<td>
Name, Vorname<br>
Straße<br>
PLZ, Ort
</td>
<td>
<input type="Text" name="Name" required><input type="Text" name="Vorname" required><br>
<input type="Text" name="Straße" required><br>
<input type="Text" name="PLZ" required><input type="Text" name="Ort" required><br>
</td>
</tr>
</table>
<button onclick="Bestellung()">Abschicken</button><button type="reset" value="Reset">Zurücksetzen</button>
</p>
</body>
</form>
</html>

Anstatt value-Werte wie "klein (20 cm)"

Code:
<input type="radio" name="Size" value="klein (20 cm)">klein (20 cm)

solltest du sowas wie 1-3 oder "k", "m", "g" nehmen. Also IDs statt Bezeichnungen. Naja für das was du vor hast ist es wahrscheinlich nicht so wichtig.

Code:
var Size = document.getElementsByName("Size")[0].value;

Klar kommt da "klein" bei heraus. Denn dort steht: Gib mir den Wert des Value-Attribut des ersten Elements mit dem Namen "Size". Das ist ideales Einsatzgebiet für jQuery.

Bitte sehr, hier Ihre Bestellung mit extra scharfem jQuery:

Code:
...
<head>
        <meta charset="utf-8"/>
        ...
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
...
        <script>
            function Bestellung() {
                var Size = $('[name=Size]:checked').val();
                var Pizza = $('[name=Pizza]:checked').val();
...

Bedeutet: Von allen Elementen mit dem Wert "Size"/"Pizza" für das Attribut name, die checked sind, gib den Wert des value-Attributs zurück.

sic_ schrieb:
Bitte sehr, hier Ihre Bestellung mit extra scharfem jQuery:


Nunja aber jQuery ist wie ich paar Beiträge zuvor schon erwähnt habe, leider nicht erlaubt. Sorry Aber trotzdem danke für die jQuery hilfe für später.

------
Ich möchte allen nochmal danken, die mir geholfen haben. Ich habe den Pizzashop nun fertig bekommen und schreibe hier die Lösung hin, falls irgendwann irgendjemand mal das gleiche Problem hat und auf dieses Problem stoßen sollte.

Zitat:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859">
<title>Pizza Service</title>
<link rel="stylesheet" type="text/css" href="Layout.css">
</head>
<form action="Pizzashop.html" method="get">
<script>

function Bestellung()
{
var Size = document.getElementsByName("Size").value;
var Pizza = document.getElementsByName("Pizza")[0].value;

var Pizza = document.getElementsByName('Pizza');

for (var i = 0, length = Pizza.length; i < length; i++) {
if (Pizza[i].checked) {
var PizzaX = Pizza[i].value;
break;
}
}

var Size = document.getElementsByName('Size');

for (var i = 0, length = Size.length; i < length; i++) {
if (Size[i].checked) {
var SizeX = Size[i].value;
break;
}
}

//Belag1
if(document.getElementsByName("Belag1")[0].checked)
{
var Belag1 = "Salami";
}
else
{
var Belag1 = "";
}

//Belag2
if(document.getElementsByName("Belag2")[0].checked)
{
if (Belag1 == "Salami")
{
var Belag2 = "\n Schinken";
}
else
{
var Belag2 = "Salami";
}
}
else
{
var Belag2 = "";
}

//Belag3
if(document.getElementsByName("Belag3")[0].checked)
{
if (Belag1 == "Salami" || Belag2 == "Schinken")
{
var Belag3 = "\n Champignon";
}
else
{
var Belag3 = "Champignon";
}
}
else
{
var Belag3 = "";
}

//Belag4
if(document.getElementsByName("Belag4")[0].checked)
{
if (Belag1 == "Salami" || Belag2 == "Schinken" || Belag3 == "Champignon")
{
var Belag4 = "\n Käse";
}
else
{
var Belag4 = "Käse";
}
}
else
{
var Belag4 = "";
}

//Kundendaten
var Name = document.getElementsByName("Name")[0].value;
var Vorname = document.getElementsByName("Vorname")[0].value;
var Straße = document.getElementsByName("Straße")[0].value;
var PLZ = document.getElementsByName("PLZ")[0].value;
var Ort = document.getElementsByName("Ort")[0].value;

if (Vorname == "" )
if (PizzaX == "Individuelle")
{
window.alert("Hallo Frau/Herr, \n\n"+Vorname+" "+Name+"\n"+Straße+"\n"+PLZ+" "+Ort+"\n\nSie haben folgende Pizza gewählt:\n\nGröße: "+SizeX+"\nArt der Pizza: Individuelle \nBelag: "+Belag1+" "+Belag2+" "+Belag3+" "+Belag4+"");
}
else
{
window.alert("Hallo Frau/Herr, \n\n"+Vorname+" "+Name+"\n"+Straße+"\n"+PLZ+" "+Ort+"\n\nSie haben folgende Pizza gewählt:\n\nGröße: "+SizeX+"\nArt der Pizza: "+PizzaX+"");
}
}
</script>

<body>
<h3>WWW-Pizza Service</h3>
<p>
<u>Bestellung:</u>
<table border="0">
<tr bgcolor = 'skyblue'>
<td>
Größe
</td>
<td>
<input type="radio" name="Size" value="klein (20 cm)" checked>klein (20 cm)<br>
<input type="radio" name="Size" value="mittel (24 cm)">mittel (24 cm)<br>
<input type="radio" name="Size" value="groß (28 cm)">groß (28 cm)<br>
</td>
</tr>
<tr bgcolor = 'lightgreen'>
<td>
Art der Pizza
</td>
<td>
<input type="radio" name="Pizza" value="Tonno" checked>Tonno (Thunfisch, Zwiebel)<br>
<input type="radio" name="Pizza" value="Quattro">Quattro (Salami, Schinken)<br>
<input type="radio" name="Pizza" value="Italia">Italia (Schinken, Artischoke)<br>
</td>
</tr>
<tr bgcolor = 'lightblue'>
<td>
</td>
<td>
<input type="radio" name="Pizza" value="Individuelle">Individuelle Zusammenstellung<br>
<input type="checkbox" name="Belag1" value="Salami">Salami<br>
<input type="checkbox" name="Belag2" value="Schinken">Schinken<br>
<input type="checkbox" name="Belag3" value="Champignon">Champignon<br>
<input type="checkbox" name="Belag4" value="Käse">Käse<br>
</td>
</tr>
<tr bgcolor = 'lightyellow'>
<td>
Name, Vorname<br>
Straße<br>
PLZ, Ort
</td>
<td>
<input type="Text" name="Name" required><input type="Text" name="Vorname" required><br>
<input type="Text" name="Straße" required><br>
<input type="Text" name="PLZ" required><input type="Text" name="Ort" required><br>
</td>
</tr>
</table>
<button onclick="Bestellung()">Abschicken</button><button type="reset" value="Reset">Zurücksetzen</button>
</p>
</body>
</form>
</html>


Sorry, wenn ich etwas wenig Kommentare eingefügt habe.

Seiten: 1 2
Referenz-URLs