[JS] Kleine Berechnung

jstrial · 21. Apr. 2010

Hallo ich möchte eine Beispielhafte Berechnung von einer Versicherungsprämie verwirklichen. Die Prämie ist abhängig von Warenwert (Usereingabe per Inputfeld) und Bestimmungsland (Usereingabe per Select-Box mit hinterlegten Prämien). Leider habe ich einen Hänger, oder Denkfehler... vielleicht kann mir jemand bitte einen Anstoss geben?

Das HTML Eingabe Formular:

Code:

<html>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="insurance.js"></script>
<link rel="stylesheet" type="text/css" href="insurance.css" media="screen"/>
<body>


<form name="insurance" method="post" target="_blank" action="idle">
<table border="0" cellpadding="2" cellspacing="0" width="480">
<tbody>
<tr>
 <td class="RahmenObenLinks" width="100%">   </td>
 <th class="RahmenOben" align="right" width="115">Eingabe</div></th>
 <th class="RahmenOben" width="10"> </th>
 <th class="RahmenOben" width="10"> </th>
 <th class="RahmenOben" align="right" width="85">Ausgabe</div></th>

 <th class="RahmenObenRechts" width="10"> </th>
</tr>

<tr>
 <td class="RahmenObenLinks" width="100%"><div align="right">Warenwert</div></td>
 <td class="RahmenOben" align="right" width="115"><input name="warenwert_exkl_10" class="readonlyKopie" onblur="ersetze_kom3(this)" value="" size="11" type="text"></td>
 <td class="RahmenOben" width="10"><div class="readonlyOhneBreite">€</div></td>
 <td class="RahmenOben" align="right" width="10"> </td>

 <td class="RahmenOben" align="right" width="85"><div id="warenwert_inkl_10" class="readonly"></div> <input name="warenwert_inkl_10" value="" type="hidden"></td>
 <td class="RahmenObenRechts" width="10"><div class="readonlyOhneBreite">€</div></td>
</tr>

<tr>
 <td class="RahmenObenLinks" width="100%"><div align="right">Ursprungsland</div></td>
 <td class="RahmenOben" align="right" width="115"><input name="origin" class="readonly" value="Deutschland" size="11" type="text"></td>
 <td class="RahmenOben" align="right" width="10"> </td>
  <td class="RahmenOben" align="right" width="10"> </td>
   <td class="RahmenOben" align="right" width="85"> </td>
    <td class="RahmenObenRechts" align="right" width="10"> </td>
</tr>

<tr>
 <td class="RahmenObenLinks" width="100%"><div align="right">Bestimmungsland</div></td>
 <td class="RahmenOben" align="right" width="115"><select align="left" width="115" name="destination_ctry" id="destination_ctry"><option value='0'> </option><option value="0,007">Abchasien</option><option value="0,010">Afghanistan</option><option value="0,004">Ägypten</option><option value="0,007">Albanien</option><option value="0,0045">Algerien</option><option value="0,005">Amerikanische Jungferninseln</option><option value="0,005">Amerikanisch-Samoa</option><option value="0,001">Andorra</option><option value="0,007">Angola</option><option value="0,0065">Anguilla</option><option value="0,0065">Antigua und Barbuda</option><option value="0,0065">Äquatorialguinea</option><option value="0,0055">Argentinien</option><option value="0,007">Armenien</option><option value="0,0065">Aruba</option><option value="0,007">Aserbaidschan</option><option value="0,01">Äthiopien</option><option value="0,00425">Australien</option><option value="0,0065">Bahamas</option><option value="0,00425">Bahrain</option><option value="0,0065">Bangladesch</option><option value="0,0065">Barbados</option><option value="0,001">Belgien</option><option value="0,008">Belize</option><option value="0,01">Bergkarabach</option><option value="0,0065">Bermuda</option><option value="0,007">Benin</option><option value="0,01">Bhutan</option><option value="0,0065">Bolivien</option><option value="0,005">Bosnien und Herzegowina</option><option value="0,008">Botsuana</option><option value="0,005">Brasilien</option><option value="0,0065">Britische Jungferninseln</option><option value="0,007">Britisches Territorium im Indischen Ozean</option><option value="0,007">Brunei, Darussalam</option><option value="0,001">Bulgarien</option><option value="0,007">Burkina Faso</option><option value="0,007">Burundi</option><option value="0,0055">Chile</option><option value="0,004">China</option><option value="0,0065">Cookinseln</option><option value="0,0065">Costa Rica</option><option value="0,001">Dänemark</option><option value="0,0009">Deutschland</option><option value="0,0065">Dominica</option><option value="0,0065">Dominikanische Republik</option><option value="0,008">Dschibuti</option><option value="0,0065">Ecuador</option><option value="0,0065">El Salvador</option><option value="0,0065">Elfenbeinküste</option><option value="0,001">England</option><option value="0,007">Eritrea</option><option value="0,0045">Estland</option><option value="0,0065">Falklandinseln</option><option value="0,0045">Färöer</option><option value="0,0045">Fidschi</option><option value="0,001">Finnland</option><option value="0,001">Frankreich</option><option value="0,006">Französisch-Guayana</option><option value="0,005">Französisch-Polynesien</option><option value="0,007">Gabun</option><option value="0,007">Gambia</option><option value="0,01">Georgien</option><option value="0,007">Ghana</option><option value="SE-COPYRIGHT">Gibraltar</option><option value="0,0035">Grönland</option><option value="0,001">Grenada</option><option value="0,001">Griechenland</option><option value="0,006">Guadeloupe</option><option value="0,006">Guam</option><option value="0,006">Guatemala</option><option value="0,0065">Guernsey</option><option value="0,007">Guinea</option><option value="0,0065">Guinea-Bissau</option><option value="0,0055">Guyana</option><option value="0,006">Haiti</option><option value="0,0065">Honduras</option><option value="0,00425">Hongkong</option><option value="0,006">Indien</option><option value="0,0065">Indonesien</option><option value="0,01">Irak</option><option value="0,01">Iran</option><option value="0,001">Irland</option><option value="0,0025">Island</option><option value="0,0015">Isle of Man</option><option value="0,004">Israel</option><option value="0,001">Italien</option><option value="0,0065">Jamaika</option><option value="0,004">Japan</option><option value="0,005">Jemen</option><option value="0,0045">Jersey</option><option value="0,005">Jordanien</option><option value="0,0045">Kaimaninseln</option><option value="0,0045">Kambodscha</option><option value="0,007">Kamerun</option><option value="0,003">Kanada</option><option value="0,0055">Kap Verde</option><option value="0,0065">Kasachstan</option><option value="0,0045">Katar</option><option value="0,0075">Kenia</option><option value="0,01">Kirgisistan</option><option value="0,007">Kiribati</option><option value="0,0055">Kolumbien</option><option value="0,0045">Komoren</option><option value="0,007">Kongo, Demokratische Republik</option><option value="0,007">Kongo, Republik</option><option value="0,0055">Kosovo</option><option value="0,01">Nordkorea</option><option value="0,0045">Südkorea</option><option value="0,0025">Kroatien</option><option value="0,0045">Kuba</option><option value="0,004">Kuwait</option><option value="0,005">Laos</option><option value="0,008">Lesotho</option><option value="0,0055">Lettland</option><option value="0,0045">Libanon</option><option value="0,008">Liberia</option><option value="0,0045">Libyen</option><option value="0,001">Liechtenstein</option><option value="0,00375">Litauen</option><option value="0,001">Luxemburg</option><option value="0,00425">Macao</option><option value="0,007">Madagaskar</option><option value="0,0085">Malawi</option><option value="0,005">Malaysia</option><option value="0,005">Malediven</option><option value="0,008">Mali</option><option value="0,0025">Malta</option><option value="0,0045">Marokko</option><option value="0,0045">Marshallinseln</option><option value="0,005">Martinique</option><option value="0,0065">Mauretanien</option><option value="0,0065">Mauritius</option><option value="0,0065">Mayotte</option><option value="0,0045">Mazedonien</option><option value="0,00395">Mexiko</option><option value="0,00425">Mikronesien</option><option value="0,004">Moldawien</option><option value="0,001">Monaco</option><option value="0,00425">Mongolei</option><option value="0,0025">Montenegro</option><option value="0,0025">Montserrat</option><option value="0,00725">Mosambik</option><option value="0,01">Myanmar</option><option value="0,00725">Namibia</option><option value="0,0055">Nauru</option><option value="0,006">Nepal</option><option value="0,0055">Neukaledonien</option><option value="0,004">Neuseeland</option><option value="0,00575">Nicaragua</option><option value="0,001">Niederlande</option><option value="0,0055">Niederländische Antillen</option><option value="0,00725">Niger</option><option value="0,00725">Nigeria</option><option value="0,00725">Niue</option><option value="0,0015">Nordirland</option><option value="0,0055">Nördliche Marianen</option><option value="0,00175">Nordzypern, Türkische Republik</option><option value="0,003">Norfolkinsel</option><option value="0,001">Norwegen</option><option value="0,00425">Oman</option><option value="0,001">Österreich</option><option value="0,007">Osttimor</option><option value="0,006">Pakistan</option><option value="0,00475">Palau</option><option value="0,01">Palästina</option><option value="0,0055">Panama</option><option value="0,007">Papua-Neuguinea</option><option value="0,0055">Paraguay</option><option value="0,0055">Peru</option><option value="0,00425">Philippinen</option><option value="0,0045">Pitcairninseln</option><option value="0,001">Polen</option><option value="0,001">Portugal</option><option value="0,0055">Puerto Rico</option><option value="0,0055">Réunion</option><option value="0,008">Ruanda</option><option value="0,00175">Rumänien</option><option value="0,00425">Russland</option><option value="0,0055">Saint-Barthélemy</option><option value="0,0055">Saint-Martin</option><option value="0,0055">Salomonen</option><option value="0,008">Sambia</option><option value="0,0045">Samoa</option><option value="0,0045">San Marino</option><option value="0,0055">São Tomé und Príncipe</option><option value="0,004">Saudi-Arabien</option><option value="0,001">Schweden</option><option value="0,00125">Schweiz</option><option value="0,007">Senegal</option><option value="0,0055">Serbien</option><option value="0,0045">Seychellen</option><option value="0,008">Sierra Leone</option><option value="0,008">Simbabwe</option><option value="0,00375">Singapur</option><option value="0,001">Slowakei</option><option value="0,00125">Slowenien</option><option value="0,008">Somalia</option><option value="0,01">Somaliland</option><option value="0,001">Spanien</option><option value="0,00425">Sri Lanka</option><option value="0,0055">St. Helena</option><option value="0,0055">St. Kitts und Nevis</option><option value="0,0055">St. Lucia</option><option value="0,0055">St. Pierre und Miquelon</option><option value="0,0055">St. Vincent und die Grenadinen</option><option value="0,00375">Südafrika</option><option value="0,008">Sudan</option><option value="0,0055">Südgeorgien und die Südlichen Sandwichinseln</option><option value="0,01">Südossetien</option><option value="0,00655">Suriname</option><option value="0,08">Swasiland</option><option value="0,00425">Syrien</option><option value="0,0065">Tadschikistan</option><option value="0,004">Taiwan</option><option value="0,008">Tansania</option><option value="0,00425">Thailand</option><option value="0,007">Togo</option><option value="0,0055">Tokelau</option><option value="0,0055">Tonga</option><option value="0,0065">Transnistrien</option><option value="0,0055">Trinidad und Tobago</option><option value="0,008">Tschad</option><option value="0,001">Tschechien</option><option value="0,004">Tunesien</option><option value="0,00375">Türkei</option><option value="0,0065">Turkmenistan</option><option value="0,0055">Turks- und Caicosinseln</option><option value="0,0047">Tuvalu</option><option value="0,008">Uganda</option><option value="0,0055">Ukraine</option><option value="0,0025">Ungarn</option><option value="0,0055">Uruguay</option><option value="0,006">Usbekistan</option><option value="0,0055">Vanuatu</option><option value="0,00125">Vatikanstadt</option><option value="0,0055">Venezuela</option><option value="0,00425">Vereinigte Arabische Emirate</option><option value="0,0025">Vereinigte Staaten</option><option value="0,00375">Vereinigtes Königreich</option><option value="0,0045">Vietnam</option><option value="0,0045">Wallis und Futuna</option><option value="0,0055">Weißrussland</option><option value="0,007">Westsahara</option><option value="0,008">Zentralafrikanische Republik</option><option value="0,002">Zypern</option><option value='0'> </option></SELECT></td>
 <td class="RahmenOben" width="10"><div class="readonlyOhneBreite"> </div></td>

 <td class="RahmenOben" align="right" width="10"> </td>
 <td class="RahmenOben" align="right" width="85"><div id="destination_ctry" class="readonly"></div><input name="destination_ctry" value="" type="hidden"></td>
 <td class="RahmenObenRechts" width="10"><div class="readonlyOhneBreite">%</div></td>
</tr>
<tr>
 <td class="RahmenObenUntenLinks" width="100%"><div align="right"><font color="#0000ff">Versicherungskosten:</font></div></td>
 <td class="RahmenUnten" align="right" width="115"> </td>
 <td class="RahmenUnten" width="10"> </td>
 <td class="RahmenUnten" align="right" width="10"> </td>
 <td class="RahmenUnten" align="right" width="85"><div id="gesamt" class="readonly"></div><input name="gesamt" value="" type="hidden"></td>
 <td class="RahmenObenUntenRechts" width="10"><div class="readonlyOhneBreite">€</div></td>
</tr>

<tr>
  <td colspan="6"> </td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="480">
  <tbody><tr>
    <td width="160"><div align="center">
      <input name="button2" class="button" onclick="location.reload()" value="Zurücksetzen" type="button">

    </div></td>
    <td width="160"><div align="center">
      <input name="button3" class="button" onclick="berechne()" value="Berechnen" type="button">
    </div></td>
  </tr>
</tbody></table>

</body>
</html>

(update)
...to be continued

jstrial · 21. Apr. 2010

Der Javascript Code:

Code:

if (document.insurance.warenwert_exkl_10.value=="") {alert('Bitte den Warenwert eingeben. Z.B.: 125000'); return false;}
// Warenwert inklusive 10 Prozent
document.insurance.warenwert_inkl_10.value = rundeauf(eval(document.insurance.warenwert_exkl_10.value * 1.1));
document.getElementById('warenwert_inkl_10').innerHTML = number_format(document.insurance.warenwert_inkl_10.value, 2, ',', '.', false);

// Praemie
document.insurance.destination_ctry.value = rundeauf(eval(number_deformat(document.insurance.destination_ctry.value)));
document.getElementById('destination_ctry').innerHTML = number_format(document.insurance.stax_e.value, 4, ',', '.', false);


// (Warenwert inklusive 10) * Prozentsatz Transportversicherung
// if(document.insurance.transportversicherung_p.value=="") document.insurance.transportversicherung_p.value="0,00";


document.insurance.transportversicherung_e.value = rundeauf(eval(document.insurance.warenwert_inkl_10.value)* eval(document.insurance.destination_ctry.value));
document.getElementById('transportversicherung_e').innerHTML = number_format(document.insurance.transportversicherung_e.value, 2, ',', '.', false);

document.insurance.gesamt.value =
rundeauf(eval(document.insurance.transportversicherung_e.value));
document.getElementById('gesamt').innerHTML = number_format(document.insurance.gesamt.value, 2, ',', '.', false);
}

und übersichtlichkeitshalber die CSS:

Code:

.summenstrich{
	border-bottom: 2px solid #555555;
	width: 20px;
	text-align: right;
	font-weight: normal;
}
.readonly {
	padding: 1px 1px 1px 2px;
	height: 16px;
	background-color:#E0E0E0;
	text-align:right;
	width: 95px;
	font-weight: normal;
}

.RahmenOben {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
}
.readonlyKopie {
	text-align:right;
	font-weight: normal;
	width: 95px;
}
.RahmenObenLinks {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000000;
}
.readonlyOhneBreite {
	text-align:right;
	font-weight: normal;
}

.RahmenObenRechts {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #000000;
}
.RahmenUnten {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
}
.RahmenObenUntenLinks {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000000;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.RahmenObenUntenRechts {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #000000;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}

(update)

kkapsner · 21. Apr. 2010

Was ist genau das Problem?

jstrial · 21. Apr. 2010

das es nicht geht^^ und um der Wahrheit die Ehre zu geben, ich habe keine Ahnung was ich da falsch mach

ich habs mal online gestellt: http://www.blankpages.de/jstest/

ulrich1992 · 21. Apr. 2010

Sieht aus nach ner vergessenen Klammer aus.

Fehler: missing ) after argument list
Quelldatei: http://www.blankpages.de/jstest/insurance.js
Zeile: 30, Spalte: 124
Quelltext:
rundeauf((eval(document.rechner.warenwert_inkl_10.value)) * (eval(number_deformat(document.rechner.destination_ctry.value)));

Fehler: ersetze_kom is not defined
Quelldatei: http://www.blankpages.de/jstest/
Zeile: 1

Fehler: berechne is not defined
Quelldatei: http://www.blankpages.de/jstest/
Zeile: 1

kkapsner · 21. Apr. 2010

Jup - 6 öffnende und 5 schließende... diese Fehlermeldungen findest du in der Fehlerkonsole, die du wahrscheinlich nicht kennst.

PS: Das eval ist hier weder nötig noch gut - parseInt oder parseFloat sollten deine erste Wahl sein.

jstrial · 22. Apr. 2010

danke erstmal für das Feedback bisher, ich kam damit -glaube ich- schon etwas weiter

Leider ist das Ergebnis noch nicht in Sicht die Fehlerkonsole meldet nun zunächst keinen Fehler mehr, aber beim Start der Rechnung sagt Sie mir das die Usereingabe (Warenwert) unbekannt ist. Im HTML Formular habe ich es meiner Meinung nach richtig deklariert? Was mich auch wundert ist, dass eigentlich eine Fehlermeldung kommen sollte wenn man den Wert absichtlich leer lässt - geht aber auch nicht grrrrr!

Für weitere Idden und Vorschläge bin ich deshalb sehr dankbar!

omgh ich bin echt ein Anfänger sorry für die dämlichen Fragen bzw danke für die Eselsgeduld^^
Also beim anpassen von JS Skripten immer alle IDs ändern, dann klappts auch mit den Werten....

OK nächste Baustelle:
Eigentlich soll zu dem eingegeben Warenwert 10% hinzuaddiert werden und dann eben ins Ausgabefeld geschrieben bzw damit weitergerechnet werden.
Das will ich eigentlich damit realisieren:

Code:

document.insurance.warenwert_inkl_10.value = rundeauf(eval(document.insurance.warenwert_exkl_10.value * 1.1));

Das Ergebnis ist aber ein "NaN,00" bzw "number is undefined".

Denkanstoss bitte

kkapsner · 22. Apr. 2010

Du kannst Elemente nicht einfach über document.ELEMENTNAME ansprechen - bei einem Formular geht das am einfachsten über document.FORMULARNAME.ELEMENTNAME, ABER sauberer ist es dem Element eine ID zu geben und mit document.getElementById zu arbeiten.

jstrial · 22. Apr. 2010

ja habe ich gemerkt (siehe oben), dein posting habe ich da aber noch nicht gesehen...

kkapsner · 22. Apr. 2010

Dein Code ist weder besonders übersichtlich noch besonders gut - das eval dort ist völlig überflüssig:

Code:

document.insurance.warenwert_inkl_10.value = (parseFloat(document.insurance.warenwert_exkl_10.value || "0") * 1.1).toFixed(2).replace(".", ",");

jstrial · 22. Apr. 2010

leider ist das Ergebnis dasselbe. Es scheint mir jetzt so, als ob die nachfolgende Funktion welche das Ergebnis in das Formularfeld füllen soll das Problem an der Sache ist

Code:

document.getElementById('warenwert_inkl_10').innerHTML = number_format(document.insurance.warenwert_inkl_10.value, 2, ',', '.', false);

Ich möchte mich nicht wiederholt für meine Unfähigkeit entschuldigen, ich versuche ja soviel wie möglich zu verstehen und es dann selbst zu lösen - nur ist es, wenige Augenblicke ausgenommen, sehr frustrierend bisher

kkapsner · 22. Apr. 2010

OK - ich glaube für dich wird es Zeit alles wegzuwerfen und noch einmall von Vorne zu beginnen - also mich persönlich verwirrt dein Code ziemlich.

Zur Hilfestellung hier mal zwei Hilfsfunktionen:

Code:

function number2de(number){
	return number.toFixed(2).replace(".", ",");
}

function de2number(str){
	str = str.replace(/,/g, ".").replace(/\s/g, "");
	if (isNaN(str)) return 0;
	return parseFloat(str);
}

- zum formatieren der Ausgabe und zum Einlesen der Eingabe.

[JS] Kleine Berechnung

jstrial

New member

jstrial

New member

kkapsner

Super Moderator

jstrial

New member

ulrich1992

New member

kkapsner

Super Moderator

jstrial

New member

kkapsner

Super Moderator

jstrial

New member

kkapsner

Super Moderator

jstrial

New member

kkapsner

Super Moderator