In HTML Formular zwei Felder mit Javascript addieren

S

skyhi

Mitglied
Hallo zusammen,

bin ein absoluter Anfänger und benötige für Übungszwecke einen Quellcode, in dem ich zwei Input-Felder addiere und das Ergebnis nach drücken eines Buttons im dritten Feld angezeigt wird.
Ihr würdet mir sehr helfen.

Vielen Dank
 
HTML: 
<html><head><title>Forumalfeld Addition</title>
 
 </head><body>
 
 	<form action=""><div>
 		<input type="text" id="input1" size="15" value="Eingabe 1" /><br />
 		<input type="text" id="input2" size="15" value="Eingabe 2" /><br />
 		<input type="button" value="Addieren!" onclick="output.value = parseFloat(input1.value) + parseFloat(input2.value)" /><br />
 		<input type="text" id="output" size="15" value="Ausgabe" /><br />
 	</div></form>
 
 </body></html>
Ist die einfachste Variante.
Wenn eines der Eingabefelder keine Zahl enthält wird im Ausgabefeld "NaN" (Not a Number) angezeigt.
 
Zuletzt bearbeitet:
Wenn du das Script von oben verwenden willst musst du das englische Dezimalzeichen (den Punkt) statt des Kommas benutzten oder in nem etwas koplizierteren JavaScript interen jedes Komma in einen Punkt umwandeln.
 
Nicht wirklich ist ne Sache von 5 Minuten
HTML: 
<html><head><title>Forumalfeld Addition</title>
 
 <script type="text/javascript"><!--
 
 function calculate() {
 	input1 = parseFloat( document.formu.input1.value.replace(/,/ , ".") );
 	input2 = parseFloat( document.formu.input2.value.replace(/,/ , ".") );
 	
 	document.formu.output.value = (input1 + input2).toString().replace(/\./ , ",");
 }
 
 //--></script>
 
 </head><body>
 	<form name="formu" action=""><div>
 		<input type="text" name="input1" size="15" value="Eingabe 1" /><br />
 		<input type="text" name="input2" size="15" value="Eingabe 2" /><br />
 		<input type="button" value="Addieren!" onclick="calculate()" /><br />
 		<input type="text" name="output" size="15" value="Ausgabe" /><br />
 	</div></form>
 </body></html>
 
Zuletzt bearbeitet:
Hallo erts mal,

Hat auch jemand eine lösung wenn ich das ganze ohne submit button machen möchte

ich habe 3 Felder in die was eingegeben werden kann

wenn ich in einem der 3 felder was eingebe soll unten ein ergebnis ausgegeben werden
 
Hi
Eine Möglichkeit wäre es so zu lösen

HTML: 
<html><head><title>Forumalfeld Addition</title>
 
 <script type="text/javascript"><!--
 
 function calculate() {
 	input1 = parseFloat( document.formu.input1.value.replace(/,/ , ".") );
 	input2 = parseFloat( document.formu.input2.value.replace(/,/ , ".") );
 	
 	document.formu.output.value = (input1 + input2).toString().replace(/\./ , ",");
 }
 
 //--></script>
 
 </head><body>
 	<form name="formu" action=""><div>
 		<input type="text" name="input1" size="15" value="Eingabe 1" onkeyup="calculate()"/><br />
 		<input type="text" name="input2" size="15" value="Eingabe 2" onkeyup="calculate()"/><br />
 		<input type="text" name="output" size="15" value="Ausgabe" /><br />
 	</div></form>
 </body></html>

Lg hendl
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück