Preisrechner mit Javascript

[kayyy]

Hey,

ich habe einige options Felder die der User anklicken kann.
Nun möchte ich, dass praktisch jeder dieser <option> felder einen eigenen preis hat. Ich vermute mal, dass macht man mit value="preis" ?

nun soll irgendwo im dokument der preis der angeklickten options felder aktualisiert werden ( ohne page refresh )

ich hoffe man versteht was ich meine

Ein treffendes Beispiel wäre https://www.psd2html.com/order-now.html
Links hat man options Felder und rechts wird der Preis aktualisiert.

Ich hoffe wirklich ihr könnt mir sagen, wie ich das mache oder habt evtl. sogar ein exactes Tutorial für mich

 

[ben]

hey

wenn ich das richtig verstehe machst willst du einfach bei einer option liste (drop down) was auswahlen und dann soll das wo anders angezeigt werden richtig??

code beispiel

<select id="preis">
<option value="1">Eins</option>
<option value="2">zwei</option>
</select>
<input type="button" value="anzeigen" onclick="zeig()" />

<!-- in dem p tag wird es angezeigt -->
<p id="show"></p>

und dann javascript

<script type="text/javascript">
function zeig() {
document.getElementById("show").innerHTML = document.getElementById("preis").value
}
</script>

so und jetzt die erklarung fur das ganze:
dein select hat verschiedene auswahl moglichkeiten die alle einen wert (value) haben. um diesen wert zu "nehmen" muss man den in javascript finden konnen also kriegt der eine id. dein button aktiviert die function zeig() und dein p tag soll dann den wert von dem select menu anzeigen. damit man den auch in JavaScript "nehmen" kann kriegt auch der eine id

so und im javascript macht man einfach nach dem muster
(wo es hin soll) = (was da hin soll)
also document.getElementById("name") nimmt das object
innerHTML ist der text der zwischen die p tags kommt und da woll der wert (also .value) eingetragen werden.

ich hoffe es ist verstandlich und es ist was du gesucht hast

MfG ben

 

[kayyy]

wow super beispiel und sehr gut erklärt danke :)
wie genau würde es dann funktionieren, wenn ich das ganze ohne den button mache? der preis wird also aktualisiert, sobald ich eine andere option anklicke und nicht erst auf den button.

muss ich dann jeder option ein "onclick" hinzufügen?

 

[ben]

ne nicht mit onclick

du nimmst den select tag und machst da onchange rein

<select id="preis" onchange="zeig()">
<option value="1">Eins</option>
<option value="2">zwei</option>
</select>

so wird die function jedes mal aufgerufen wenn sich der wert in dem menu andert und dann wird der neue wert direkt angezeigt in dem p tag