+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Webmaster (/forumdisplay.php?fid=44)
+--- Forum: Script-Check (/forumdisplay.php?fid=91)
+--- Thema: *gelöst* Frage zu Problem bei Javascript (/showthread.php?tid=51163)
*gelöst* Frage zu Problem bei Javascript - VarmintLP - 29.09.2014 13:25
Guten Tag liebe Community,
Vor kurzem habe ich die Aufgabe bekommen einen Pizza Webshop (nur eine simple Version) zu erstellen. Ich bin jetzt bei der Abfrage der angaben.
Ich hab bereits mehrere Foren durchsucht und keine funktionierenden Ergebnis gefunden. Leider habe ich auch keine isset() funktion gefunden, die unter Javascript funktioniert.
Außerdem würde ich lieber mit PHP arbeiten, aber die Aufgabe sagt ausdrücklich nur Javascript.
Allerdings habe ich ein Problem.
Man kann zwischen 4 Pizzas auswählen.
Zitat:
<input type="radio" name="Pizza" value="Tonno" required>Tonno (Thunfisch, Zwiebel)<br>
<input type="radio" name="Pizza" value="Quattro" required>Quattro (Salami, Schinken)<br>
<input type="radio" name="Pizza" value="Italia" required>Italia (Schinken, Artischoke)<br>
<input type="radio" name="Pizza" value="Individuelle" required>Individuelle Zusammenstellung<br>
<input type="radio" name="Pizza" value="Quattro" required>Quattro (Salami, Schinken)<br>
<input type="radio" name="Pizza" value="Italia" required>Italia (Schinken, Artischoke)<br>
<input type="radio" name="Pizza" value="Individuelle" required>Individuelle Zusammenstellung<br>
Soweit so gut. Nun wenn man Pizza 4 (Individuelle Zusammenstellung) auswählt, hat man folgende Zutaten:
Zitat:
<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>
<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>
Nun kommt das Problem. Ich weiß leider nicht, wie ich die Abfrage machen kann, ob die Checkbox ausgewählt wurde oder nicht.
Abfrage der Variablen ist:
Zitat:
var Belag1 = document.getElementsByName("Belag1")[0].value;
Meine erste If Abfrage war:
Zitat:
if (document.getElementsByName("Belag1").checked)
{
alert("Checked");
}
{
alert("Checked");
}
Alert ist meine Ausgabe, falls es klappt.
Am Ende sollen jedenfalls nur die Ausgewàhlten Zutaten oder die fertige Pizza ausgewählt werden.
Würde mich über eure Hilfe freuen.
Mit freundlichen Grüßen
VarmintLP
RE: Frage zu Problem bei Javascript - Aaron - 29.09.2014 14:01
[Link: Registrierung erforderlich]
Natürlich musst du das ganze noch irgendwie auslösen/triggern - z.b. inline mit onclick()
Steht aber auch auf der von mir verlinkten Seite.
RE: Frage zu Problem bei Javascript - VarmintLP - 29.09.2014 14:10
Aaron schrieb:
http://stackoverflow.com/questions/9887360/check-if-checkbox-is-checked-javascript
Natürlich musst du das ganze noch irgendwie auslösen/triggern - z.b. inline mit onclick()
Steht aber auch auf der von mir verlinkten Seite.
Natürlich musst du das ganze noch irgendwie auslösen/triggern - z.b. inline mit onclick()
Steht aber auch auf der von mir verlinkten Seite.
Da ist das nächste Problem. jQuerry hab ich leider keine Ahnung von und kann somit auch nichts mit dem Code anfangen und jQuerry ist auch nicht erlaubt in dieser Aufgabe.
Hier ist mal der Code von dem was ich bis jetzt habe
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;
var Belag1 = document.getElementsByName("Belag1")[0].value;
if (Pizza == "Individuelle")
{
var zusatz ="";
//with(document.lol)
// {
// for (var)
// }
if (document.getElementsByName("Belag1").checked)
{
alert("Checked");
}
else
{
var Check1 = 0;
alert (Check1);
}
}
var Belag2 = document.getElementsByName("Belag2")[0].value;
var Belag3 = document.getElementsByName("Belag3")[0].value;
var Belag4 = document.getElementsByName("Belag4")[0].value;
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;
alert(Belag1);
alert(Size);
if (Belag2 == 1)
{
window.alert("Sie haben nicht sämtliche Angaben ausgefüllt!");
}
else if (Belag1 == 1)
{
window.alert("Sie haben keine Zutat ausgewählt!");
}
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)" required>klein (20 cm)<br>
<input type="radio" name="Size" value="mittel (24 cm)" required>mittel (24 cm)<br>
<input type="radio" name="Size" value="groß (28 cm)" required>groß (28 cm)<br>
</td>
</tr>
<tr bgcolor = 'lightgreen'>
<td>
Art der Pizza
</td>
<td>
<input type="radio" name="Pizza" value="Tonno" required>Tonno (Thunfisch, Zwiebel)<br>
<input type="radio" name="Pizza" value="Quattro" required>Quattro (Salami, Schinken)<br>
<input type="radio" name="Pizza" value="Italia" required>Italia (Schinken, Artischoke)<br>
</td>
</tr>
<tr bgcolor = 'lightblue'>
<td>
</td>
<td>
<input type="radio" name="Pizza" value="Individuelle" required>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>
<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;
var Belag1 = document.getElementsByName("Belag1")[0].value;
if (Pizza == "Individuelle")
{
var zusatz ="";
//with(document.lol)
// {
// for (var)
// }
if (document.getElementsByName("Belag1").checked)
{
alert("Checked");
}
else
{
var Check1 = 0;
alert (Check1);
}
}
var Belag2 = document.getElementsByName("Belag2")[0].value;
var Belag3 = document.getElementsByName("Belag3")[0].value;
var Belag4 = document.getElementsByName("Belag4")[0].value;
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;
alert(Belag1);
alert(Size);
if (Belag2 == 1)
{
window.alert("Sie haben nicht sämtliche Angaben ausgefüllt!");
}
else if (Belag1 == 1)
{
window.alert("Sie haben keine Zutat ausgewählt!");
}
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)" required>klein (20 cm)<br>
<input type="radio" name="Size" value="mittel (24 cm)" required>mittel (24 cm)<br>
<input type="radio" name="Size" value="groß (28 cm)" required>groß (28 cm)<br>
</td>
</tr>
<tr bgcolor = 'lightgreen'>
<td>
Art der Pizza
</td>
<td>
<input type="radio" name="Pizza" value="Tonno" required>Tonno (Thunfisch, Zwiebel)<br>
<input type="radio" name="Pizza" value="Quattro" required>Quattro (Salami, Schinken)<br>
<input type="radio" name="Pizza" value="Italia" required>Italia (Schinken, Artischoke)<br>
</td>
</tr>
<tr bgcolor = 'lightblue'>
<td>
</td>
<td>
<input type="radio" name="Pizza" value="Individuelle" required>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>
RE: Frage zu Problem bei Javascript - DebianDEV - 29.09.2014 14:11
Hi,
1: -> Pizzen - nicht Pizzas .....
2: -> onchange Eventhandler
3: Musterlösung für deine bereits umgesetzte Variante
Code:
if(document.getElementsByName("Belag1")[0].checked) {
alert('Belag1 ausgewaehlt');
} else {
alert('nope');
}
RE: Frage zu Problem bei Javascript - Phinitris - 29.09.2014 14:20
Hey,
hab dir gerade auch mal was auf die schnelle gebastelt ;D
Wie Nico schon sagte, am besten per onChange Funktion machen.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pizza Services</title>
</head>
<body>
<input type="checkbox" name="Belag1" class="toppings" value="Salami" onchange="settopping(this);">Salami<br>
<input type="checkbox" name="Belag2" class="toppings" value="Schinken" onchange="settopping(this);">Schinken<br>
<input type="checkbox" name="Belag3" class="toppings" value="Champignon" onchange="settopping(this);">Champignon<br>
<input type="checkbox" name="Belag4" class="toppings" value="Käse" onchange="settopping(this);">Käse<br>
<script text="text/javascript">
function settopping(self) {
if (typeof toppings === "undefined") {
toppings = new Array();
var topps = document.getElementsByClassName("toppings");
Array.prototype.forEach.call(topps, function(topp) {
// Do stuff with the element
toppings[topp.name] = false;
});
}
toppings[self.name] = self.checked ? true : false;
console.log(toppings);
}
</script>
</body>
</html>
RE: Frage zu Problem bei Javascript - Aaron - 29.09.2014 14:27
Wo steht denn was von jQuery in dem von mir geposteten Link?
RE: Frage zu Problem bei Javascript - VarmintLP - 29.09.2014 14:38
Phinitris schrieb:
Hey,
hab dir gerade auch mal was auf die schnelle gebastelt ;D
Wie Nico schon sagte, am besten per onChange Funktion machen.
hab dir gerade auch mal was auf die schnelle gebastelt ;D
Wie Nico schon sagte, am besten per onChange Funktion machen.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pizza Services</title>
</head>
<body>
<input type="checkbox" name="Belag1" class="toppings" value="Salami" onchange="settopping(this);">Salami<br>
<input type="checkbox" name="Belag2" class="toppings" value="Schinken" onchange="settopping(this);">Schinken<br>
<input type="checkbox" name="Belag3" class="toppings" value="Champignon" onchange="settopping(this);">Champignon<br>
<input type="checkbox" name="Belag4" class="toppings" value="Käse" onchange="settopping(this);">Käse<br>
<script text="text/javascript">
function settopping(self) {
if (typeof toppings === "undefined") {
toppings = new Array();
var topps = document.getElementsByClassName("toppings");
Array.prototype.forEach.call(topps, function(topp) {
// Do stuff with the element
toppings[topp.name] = false;
});
}
toppings[self.name] = self.checked ? true : false;
console.log(toppings);
}
</script>
</body>
</html>
Ich blick da irgendwie nicht ganz durch @,@ Sorry
RE: Frage zu Problem bei Javascript - DebianDEV - 29.09.2014 14:39
Dann nimm doch dieses hier:
Code:
if(document.getElementsByName("Belag1")[0].checked) {
alert('Belag1 ausgewaehlt');
} else {
alert('nope');
}
".checked" = Is XYZ Checked?
Mehr dazu:
[Link: Registrierung erforderlich]
RE: Frage zu Problem bei Javascript - VarmintLP - 29.09.2014 14:46
CreativeDEV.de schrieb:
Dann nimm doch dieses hier:
Code:
if(document.getElementsByName("Belag1")[0].checked) {
alert('Belag1 ausgewaehlt');
} else {
alert('nope');
}
".checked" = Is XYZ Checked?
Mehr dazu:
[Link: Registrierung erforderlich]
Hab dir ein Danke gegeben ^^
Jetzt fällt mir asuf, dass egal was ich auswähle Size und Pizza sind immer klein und Tonno ^^'
Hab aktuell echt ein kleines Hindernis in meinem Denkapparat
RE: Frage zu Problem bei Javascript - sic_ - 29.09.2014 18:31
Zitat:
Jetzt fällt mir asuf, dass egal was ich auswähle Size und Pizza sind immer klein und Tonno ^^'
Hab aktuell echt ein kleines Hindernis in meinem Denkapparat
Hab aktuell echt ein kleines Hindernis in meinem Denkapparat
Poste doch mal den aktuellen Stand.
RE: Frage zu Problem bei Javascript - VarmintLP - 30.09.2014 09:55
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>
<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>
RE: Frage zu Problem bei Javascript - sic_ - 30.09.2014 10:03
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.
RE: Frage zu Problem bei Javascript - VarmintLP - 30.09.2014 17:54
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.
RE: Frage zu Problem bei Javascript - sic_ - 30.09.2014 18:47
------
RE: Frage zu Problem bei Javascript - VarmintLP - 03.10.2014 08:30
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>
<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.