Einfache Berechnung

S

starbug

Erfahrenes Mitglied
Hallo allerseits,
ich hab eigentlich nur mal ein bisschen mit JavaScript gespielt und wollte einen einfache Berechnung machen. Ich poste mal meinen Code.

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Fit werden und fit bleiben</title>
<script type="text/javascript" src="bouns.js"></script>
<link rel="stylesheet" type="text/css" href="bonus.css" />
</head>
<body>

<form action="" method="post">
<table>
	<tr>
		<td> Einnahme: </td>
    	<td> <input type="text" id="einnahme" name="einnahme" size="20" /> </td>
	</tr> 
    <tr>
		<td> Ausgabe: </td>
    	<td> <input type="text" id="ausgabe" name="ausgabe" size="20" /> </td>
        <td class="invis"> Bitte geben Sie eine richtige Zahl ein </td>
	</tr> 
    <tr>
		<td> Differenz: </td>
    	<td> <input type="text" id="diff" name="diff" size="20" /> </td>
        <td> <input type="button" name="berechnen" onclick="berechne" value="Berechnen" /> </td>
	</tr>    
</table>
</form>    
</body>
</html>


und dazu meine JavaScript Funktion


Code: 
function berechne()
{ var ein = document.getElementById("einnahme");
  var aus = document.getElementById("ausgabe");
  var differenz = document.getElementById("diff");
  
  differenz.value = ein-aus;
  
}

Habs mit Firefox versucht aber wenn ich auf meinen Berechnen-Button klicke passiert nicht, was mache ich falsch****
 
Code: 
onclick="berechne"

Hier übergibst du nur einen String, da es aber ein EventHandler ist, erwartet es eine Function, welche du ja schon definiert hast.
Mit:

Code: 
onclick="berechne();"
sollte es funktionieren.
 
@ Maniac, das geht leider nicht, es wird einfach nichts berechnet.

@ Moorb, wie meinst du das .value fehlt? Ich bekomme die Werte doch mit der documents.getElement... Anweisung oder nicht?
 
starbug hat gesagt.:
@ Maniac, das geht leider nicht, es wird einfach nichts berechnet.

@ Moorb, wie meinst du das .value fehlt? Ich bekomme die Werte doch mit der documents.getElement... Anweisung oder nicht?
Zum Vergrößern anklicken....

var ein = document.getElementById("einnahme").value;
var aus = document.getElementById("ausgabe").value;

Habs getestet. Funktioniert.
 
Hast du das auch mit HTML-Code gemacht den ich oben gepostet habe? Habe das jetzt mit .value versucht und es will einfach nicht laufen. Ich weiss nicht wo der Fehler liegt, villeicht ja auch am Browser, hab Firefox benutzt.
 
Hier der Gesamte Code. Getestet mit IE+FF

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Fit werden und fit bleiben</title>
<script type="text/javascript" src="bouns.js"></script>
<link rel="stylesheet" type="text/css" href="bonus.css" />
<script type="text/javascript">
function berechne()
{ var ein = document.getElementById("einnahme").value;
  var aus = document.getElementById("ausgabe").value;
  var differenz = document.getElementById("diff");

  differenz.value = ein-aus;

}
</script>
</head>
<body>

<form action="" method="post">
<table>
	<tr>
		<td> Einnahme: </td>
    	<td> <input type="text" id="einnahme" name="einnahme" size="20" /> </td>
	</tr>
    <tr>
		<td> Ausgabe: </td>
    	<td> <input type="text" id="ausgabe" name="ausgabe" size="20" /> </td>
        <td class="invis"> Bitte geben Sie eine richtige Zahl ein </td>
	</tr>
    <tr>
		<td> Differenz: </td>
    	<td> <input type="text" id="diff" name="diff" size="20" /> </td>
        <td> <input type="button" name="berechnen" onclick="berechne()" value="Berechnen" /> </td>
	</tr>
</table>
</form>
</body>
</html>

Eventuell hattest du noch irgendwo was übersehen.
 
Hier dein Code so geschrieben das es funktioniert:
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Fit werden und fit bleiben</title>
<script type="text/javascript" src="bouns.js"></script>
<link rel="stylesheet" type="text/css" href="bonus.css" />
<script type="text/javascript">
function berechne()
{
  var ein = document.getElementById("einnahme").value;
  var aus = document.getElementById("ausgabe").value;
  var differenz = document.getElementById("diff");
  
  differenz.value = ein-aus;
  
}
</script>

</head>
<body>

<form action="" method="post">
<table>
	<tr>
		<td> Einnahme: </td>
    	<td> <input type="text" id="einnahme" name="einnahme" size="20" /> </td>
	</tr> 
    <tr>
		<td> Ausgabe: </td>
    	<td> <input type="text" id="ausgabe" name="ausgabe" size="20" /> </td>
        <td class="invis"> Bitte geben Sie eine richtige Zahl ein </td>
	</tr> 
    <tr>
		<td> Differenz: </td>
    	<td> <input type="text" id="diff" name="diff" size="20" /> </td>
        <td> <input type="button" name="berechnen" onclick="berechne()" value="Berechnen" /> </td>
	</tr>    
</table>
</form>    
</body>
</html>
 
Danke, hab einfach mal deinen Code kopiert und es geht obwohl ich keinen Unterschied zu meinem finden kann, ausser das ich die JavaScript Funktion in eine eigene Datei ausgelagert habe.
 
starbug hat gesagt.:
Danke, hab einfach mal deinen Code kopiert und es geht obwohl ich keinen Unterschied zu meinem finden kann, ausser das ich die JavaScript Funktion in eine eigene Datei ausgelagert habe.
Zum Vergrößern anklicken....

Ich wiederhole nochmal, was meine Vorredner gesagt haben:

Du hattest kein ".value" da stehen, deshalb standen in "ein" und "aus" nur Referenzen auf die Textfelder selbst, aber nicht deren Wert. Beim zuweisen hast du ja auch nicht einfach "differenz = ein-aus;" geschrieben.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück