Klausur NR.2 Aufgabe 2

von **Marv | RiseOfTheEagle** Mo Feb 05, 2018 10:12 am

Die Aufgabe aus der Klausur mit den Auto-Shop

HTML:

Code:: <!DOCTYPE html> <html> <head> <title>Brümmli Preisliste VW</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="preisliste.css"> </head> <body> <header> <h1>Preisliste unserer Brümmli VW Modelle</h1> <h3>Klicken sie auf ein Modell, um unten den Preis zu sehen</h3> </header> <main> <img id="car1" title="ITA-M Gruppenbild 207" src="beetle_blau.png"/> <img id="car2" title="ITA-M Gruppenbild 207" src="golf_rot.png"/> <img id="car3" title="ITA-M Gruppenbild 207" src="up_gruen.png"/> <div class="box"> <input id="add1" type="checkbox" name="addon" value="ledersitze"> Ledersitze (Aufpreis: 600€) <input id="add2" type="checkbox" name="addon" value="alu-felgen"> Alu-Felgen (Aufpreis: 1100€) <input id="add3" type="checkbox" name="addon" value="klimaanlage"> Klimaanlage (Aufpreis: 400€) </div> <div class="box"> <p id="ausgabem"></p> <p id="ausgabep"></p> <img id="vorschau" title="Vorschau" src=""/> </div> </main> <script src="preisliste.js"></script> </body> </html>

CSS:

Code:: html{ background-color: lightgrey; color: black; } .box{ margin: 10px; padding: 10px 0px 10px 40px; border-width: 2px; border-style: solid; border-color: black; }

JS:

Code:: //Gibt den Preis und die Daten für das Auto Nr. 1 an function car1() { //Berechnung car = 1; preis = 30000; addon(); //Ausgabe document.getElementById("ausgabem").innerHTML = "Modell: Beetle in Blau" document.getElementById("ausgabep").innerHTML = "Kaufpreis: " + preis + "€"; document.getElementById('vorschau').src='beetle_blau.png'; } //Gibt den Preis und die Daten für das Auto Nr. 2 an function car2() { //Berechnung car = 2; preis = 26000; addon(); //Ausgabe document.getElementById("ausgabem").innerHTML = "Modell: VW Gold in Rot" document.getElementById("ausgabep").innerHTML = "Kaufpreis: " + preis + "€"; document.getElementById('vorschau').src='golf_rot.png'; } //Gibt den Preis und die Daten für das Auto Nr. 3 an function car3() { //Berechnung car = 3; preis = 11000; addon(); //Ausgabe document.getElementById("ausgabem").innerHTML = "Modell: Up in Türkis" document.getElementById("ausgabep").innerHTML = "Kaufpreis: " + preis + "€"; document.getElementById('vorschau').src='up_gruen.png'; } //Sorgt dafür das die Preise der Aufpreise zu den aktuellen Preis hinzugerechnet werden function addon(){ var checkboxes = document.querySelectorAll('input[name="addon"]'); var num = checkboxes.length; if (checkboxes[0].checked === true) { preis = preis + 600; } if (checkboxes[1].checked === true) { preis = preis + 1100; } if (checkboxes[2].checked === true) { preis = preis + 400; } } //Sorgt dafür das immer wenn eine Checkbox gecklickt wird der Preis aktualisiert wird function add(){ if (car == 0) { }else if (car == 1) { car1(); }else if (car == 2) { car2(); }else if (car == 3) { car3(); } } //Sorgt dafür das alles beim laden der Seite aufrufbar ist window.onload = function () { var car = 0; //Sorgt für die onClick nutzung document.getElementById("car1").onclick = car1; document.getElementById("car2").onclick = car2; document.getElementById("car3").onclick = car3; document.getElementById("add1").onclick = add; document.getElementById("add2").onclick = add; document.getElementById("add3").onclick = add; };