• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Preisberechnung per Radio Buttons

Lukas.HTML

Neues Mitglied
Hallo,
ich habe schon länger ein problem mit meinem kleinen Shopsystem.
Dort wollte ich, dass man das Produkt selber konfigurieren kann und sich dann logischer weise der Preis anpasst.
Nur leider funtkioniert es nur bei den ersten 8 Möglichkeiten.
Bei den darauffolgenden wird der Preis 0 angezeigt.
Kann mir da jemand helfen?

Dies ist der Code der Seite:


<section>
<p><!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SmartPC kaufen - LR Store</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Hauptseite/styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a class="logo" href="Meine Webseite.html"><img src="Hauptseite/Logo.png" width="150px" height="150px" alt="logo"></a>
<font size="6"><center>
<nav>
<ul class="nav__links">
<li><a href="Produktseiten/SmartPad/1.Generation/SmartPad.html">SmartPad</a></li>
<li><a href="Produktseiten/SmartOffice/5.Generation/SmartOffice [5.Generation].html">SmartOffice</a></li>
<li><a href="Produktseiten/SmartSchool/2.Generation/SmartSchool [2.Generation].html">SmartSchool</a></li>
<li><a href="Produktseiten/SmartClock/1.Generation/SmartClock.html">SmartClock</a></li>
<li><a href="Produktseiten/SmartBook/1.Generation/SmartBook [1.Generation].html">SmartPC</a></li>
</ul>
</nav>
</font></center>
<font size="6">
<a class="cta" href="Produktseiten/SmartOS/SmartOS.html">SmartOS</a>
</font></center>
<p class="menu cta">Menu</p>
</header>
<div id="mobile__menu" class="overlay">
<a class="close">&times;</a>
<div class="overlay__content">
<a href="#">SmartPad</a>
<a href="#">SmartOffice</a>
<a href="#">SmartSchool</a>
</div>
</div>
<script type="text/javascript" src="Hauptseite/mobile.js"></script>
</body>
</p>
</section>
<section class="Section1">
<style>
.Section1 {
font-size: 24px;
font-family: consolas;
background-color: #6E6B6B;
}
.Überschrift {
word-spacing: 29em;

}
</style>
<h1 align="center" class="Überschrift">SmartPC <font color="#6E6B6B">f</font>ab<font color="#6E6B6B">f</font>299,99€</h1>
<hr color="black">
<p style="text-align: right";>
<img src="Produktseiten/SmartPC/SmartPC - Mini/SmartPC [Mini] - Vorne.png" style="margin-left: 165px;" align="left">
</p>
<br>
<br>
<br>
<br>
<p style="margin-right: 850px;" align="right"><font size="6" color="red">Neu</font></p>
<p style="margin-right: 535px;" align="right"><font size="15" color="black">SmartPC kaufen</font></p>
<br>
<br>
<br>
<br>
<br>
<br>
<p style="margin-right: 500px;" align="right"><font size="6" color="black">Wähle deinen Prozessor.</font></p>
<br>
<script language="JavaScript">
<!--
function aktualisieren() {
var gespreis = 0;
var wert = 0;
for (var i = 1; i <= 8; i++) {
if (document.getElementById(i).checked) {
wert = parseFloat(document.getElementById(i).value);
anzahl = document.getElementById("anzahl"+i).value
wert = wert*100*anzahl;
gespreis += parseInt(wert);
}
}
gespreis = parseFloat(gespreis);
gespreis = gespreis/100;
document.getElementById('preis').value = gespreis;
}
-->
</script>
<style>
.Unsichtbar {
visibility: hidden;
}
.Ausgabefeld {
border: 0;
}
</style>
</head>
<body>
<p style="margin-right: 770px;" align="right"><input name="Prozessor" id="1" type="radio" value="133.991E0" onchange="aktualisieren()" /> i3-9100F</p>
<p style="margin-right: 625;" align="right">4 Kerne mit 3,4 GHz</p>
<p style="margin-right: 510;" align="right">(Turbo Boost bis zu 4,2 GHz)</p>
<SELECT id="anzahl1" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT>
</p>
<p style="margin-right: 770px;" align="right"><input name="Prozessor" id="2" type="radio" value="199.991E0" onchange="aktualisieren()" /> i5-9400F </p>
<p style="margin-right: 625;" align="right">6 Kerne mit 2,9 GHz</p>
<p style="margin-right: 510;" align="right">(Turbo Boost bis zu 4,1 GHz)</p>
<SELECT id="anzahl2" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT>
</p>
<p style="margin-right: 770px;" align="right"><input name="Prozessor" id="3" type="radio" value="314.991E0" onchange="aktualisieren()" /> i7-9700F </p>
<p style="margin-right: 625;" align="right">8 Kerne mit 3,0 GHz</p>
<p style="margin-right: 510;" align="right">(Turbo Boost bis zu 4,7 GHz)</p>
<SELECT id="anzahl3" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT>
</p>
<br>
<br>
<p style="margin-right: 400px;" align="right"><font size="6" color="black">Wähle deinen Arbeitsspeicher.</font></p>
<br>
<p style="margin-right: 585px;" align="right">
<input name="Arbeitsspeicher" id="4" type="radio" value="41.011E0" onchange="aktualisieren()" /> 8 GB 2666 MHz DDR4
<SELECT id="anzahl4" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT></p>
<p style="margin-right: 572px;" align="right">
<br>
<input name="Arbeitsspeicher" id="5" type="radio" value="85.001E0" onchange="aktualisieren()" /> 16 GB 2666 MHz DDR4
<SELECT id="anzahl5" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT></p>
<p style="margin-right: 572px;" align="right">
<br>
<input name="Arbeitsspeicher" id="6" type="radio" value="120.001E0" onchange="aktualisieren()" /> 32 GB 2666 MHz DDR4
<SELECT id="anzahl6" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT></p>
<p style="margin-right: 572px;" align="right">
<br>
<input name="Arbeitsspeicher" id="7" type="radio" value="199.991E0" onchange="aktualisieren()" /> 64 GB 2666 MHz DDR4
<SELECT id="anzahl7" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT></p>
<p>
<br>
<br>
<p style="margin-right: 435px;" align="right"><font size="6" color="black">Wähle deinen Speicherplatz.</font></p>
<br> <p style="margin-right: 570px;" align="right">
<input name="SSD" id="8" type="radio" value="124.991E0" onchange="aktualisieren()" /> 128 GB SSD Speicher
<SELECT id="anzahl8" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT></p>
<br> <p style="margin-right: 570px;" align="right">
<input name="SSD" id="8" type="radio" value="150.991E0" onchange="aktualisieren()" /> 256 GB SSD Speicher
<SELECT id="anzahl8" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT></p>
<br> <p style="margin-right: 570px;" align="right">
<input name="SSD" id="8" type="radio" value="175.991E0" onchange="aktualisieren()" /> 512 GB SSD Speicher
<SELECT id="anzahl8" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT></p>
<br> <p style="margin-right: 595px;" align="right">
<input name="SSD" id="8" type="radio" value="205.001E0" onchange="aktualisieren()" /> 1 TB SSD Speicher
<SELECT id="anzahl8" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT></p>
<br> <p style="margin-right: 595px;" align="right">
<input name="SSD" id="8" type="radio" value="265.001E0" onchange="aktualisieren()" /> 2 TB SSD Speicher
<SELECT id="anzahl8" class="Unsichtbar" onchange="aktualisieren()"><OPTION value="1">1x</OPTION><OPTION value="2">2x</OPTION></SELECT></p>
<p>
<input style="border: 0;" name="gesamtpreis" id="preis" type="text" value="0.00&euro;" readonly="readonly" /> &euro;</p>
 
Werbung:
vielen Dank für die schnelle Antwort was müsste ich dann bei der ID hinschreiben und wo ist mein HTML code veraltet.
Danke im Voraus!

PS: Sobald ich die Zahl im Code ändere den du markiert hast funktioniert garnichts mehr.
 
Zuletzt bearbeitet:
Werbung:
Hau deinen Code mal durch den Validator: https://validator.w3.org/

Der fliegt Dir richtig um die Ohren.

Ein id muss einmalig sein, darf also nur einmal im ganzen Code vorkommen. Du hast 5 Mal id="8" und 5 Mal id="anzahl8". Wenn du document.getElementById(8) nutzt bekommst du einfach das erste zurück. Und nicht das, was du gerne hättest.
 
Vielen Dank für die Antwort!
Ein id muss einmalig sein, darf also nur einmal im ganzen Code vorkommen. Du hast 5 Mal id="8" und 5 Mal id="anzahl8". Wenn du document.getElementById(8) nutzt bekommst du einfach das erste zurück. Und nicht das, was du gerne hättest.
Die ID habe ich nun immer nur einmal drin.
Nur wenn ich den wert zu document.getElementByld(8) ändere funktioniert der Rechenvorgang überhaupt nicht mehr bei gar keiner Möglichkeit :(
 
Code:
<input name="SSD" id="8" type="radio" value="124.991E0" onchange="aktualisieren()" />
<input name="SSD" id="8" type="radio" value="150.991E0" onchange="aktualisieren()" />
<input name="SSD" id="8" type="radio" value="175.991E0" onchange="aktualisieren()" />
<input name="SSD" id="8" type="radio" value="205.001E0" onchange="aktualisieren()" />
<input name="SSD" id="8" type="radio" value="265.001E0" onchange="aktualisieren()" />

Sicher? Wie gesagt, validier Deinen Code, dann bekommst du das angezeigt.
<center> ist veraltet, <font> ist veraltet. align="right" ist veraltet, etc., etc.
 
Werbung:
Den Code habe ich validiert. Der hat 15 Fehler gefunden die werde ich noch beheben und es dann mal mit deinem code versuchen, denn du reingeschickt hast.
Ich kann denn Code dann nochmal reinschicken!
Wie gesagt ID´s habe ich geändert und nur noch nicht reingeschickt!
 
Ich habe mich jetzt dazu entschieden die Seite neu zu machen.
Nur bin ich was JavaScript angeht ein absoluter Vollpfosten:D
 
Werbung:
Zurück
Oben