[FRAGE] Scriptproblem Anfänger, einfaches Formular und Rechnen

[jstraum]

Hallo,

ich bin aktuell blutiger Javascript Anfänger und hab schon einige Tutorials gelesen, aber bekomme schon diesen simplen Code nicht zum Laufen:

      <script type="text/javascript">
        <!--
        //document.write("<p>JAVASCRIPTCODE DEFAULT fuer ALLE RECHNER</p>");
        // 1. Variablen festlegen/reinladen 

       function fktberechnen() {             

        var var613, var614, var615,  ergebnis2, varleer;
        var varleer = "";         
        var var613 = parseInt(document.getElementById("var613").value);
var var614 = parseInt(document.getElementById("var614").value);
var var615 = parseInt(document.getElementById("var615").value);
                
        // 2. Formel reinladen + berechnen nach Formel
        ((var613*var613*var613))*(var614/100)=var615;        
         //document.meinrechner1.ergebnis2.value = var615;
        document.getElementById('ergebnis2').innerHTML = var615;
        }
        -->
      </script>
      
      <form id="meinrechner1">
        FEld 1 <input type="text" size="40" id="var613"> 
        Feld 2: <input type="text" size="40" id="var614">
                 <div style="border:1px solid #000000;width:100px;height:20px;" id="ergebnis2"></div>
                
        <a href="#"  onclick="fktberechnen();">rechnen</a>  
      </form>

Kann mir jemand einen Tipp geben, was da falsch ist?

Vielen Dank an die Experten.

Viele Grüße
Olaf

 

[paul schmitz]

Das Element mit der Id var615 gibt's doch gar nicht ...

Schaue das nächste mal in der Fehlerkonsole (Firefox: Strg+Umschalt+K, Chrome: Strg+Umschalt+I) nach Fehlern!
Lösung hatte ich deshalb in 15 Sekunden.

Zudem habe ich das Script noch etwas verschönert (beinhaltet Korrektur):

<script type="text/javascript">
       function fktberechnen() {             

        var var613, var614, var615,  ergebnis2, varleer="";      
        var var613 = parseInt(document.getElementById("var613").value);
        var var614 = parseInt(document.getElementById("var614").value);
                
        var615=((var613*var613*var613))*(var614/100);
        document.getElementById('ergebnis2').innerHTML = var615;
        }
      </script>
      
      <form id="meinrechner1">
        Feld 1 <input type="text" size="40" id="var613"> 
        Feld 2: <input type="text" size="40" id="var614">
                 <div style="border:1px solid #000000;width:100px;height:20px;" id="ergebnis2"></div>
                
        <a href="#"  onclick="fktberechnen();">rechnen</a>  
      </form>

 

[kkapsner]

Dein Code produziert einen Fehler in der Fehlerkonsole... es existiert kein <input> mit der ID "var615" (was übrigens keine gute ID ist - besser ist es immer sprechende Namen zu verwenden. Auch bei den Variablen.)

Zusätzlich noch ein paar Tipps zu deinem Code:
1. vergiss document.write()
2. HTML-Kommentare in JS-Code sind unnötig und können Probleme bereiten... oder willst du wirklich noch den Mosaic unterstützen?
3. sicherheitshalber sollte man parseInt() als zweiten Parameter die Basis des Zahlensystems mitgeben. Ältere Browser können sonst unerwartete Ergebnisse liefern. Ich persönlich würde ja parseFloat() nehmen - dann kann man auch Kommazahlen eingeben (ACHTUNG! Das Dezimalzeichen in JS ist ein Punkt und kein Komma. Das müsstest du vor dem Parsen entsprechend umwandeln)
4. Wenn nichts oder keine Zahl in das <input> eingegeben wird, liefert parseInt() (und auch parseFloat()) ein NaN (Not a Number). Um diesen Fall abzudecken kannst du einen Defaultwert definieren, indem du folgendes Konstrukt verwendest:

var var613 = parseInt(document.getElementById("var613").value) || 0;

5. Die Variablenzuweisung (=) ist nicht vertauschbar. So ist a = b nicht das gleiche wie b = a. So darfst du auf die rechte Seite keine Rechenanweisung schreiben, wie du es gemacht hast. Richtig heißt es (die Klammern sind nicht falsch, aber überflüssig):

var615 = var613*var613*var613*var614/100;

6. Dein Code ist nicht sauber formatiert. Du solltest dir gleich ganz zu Anfang angewöhnen, deinen Code sauber zu formatieren. Macht das Lesen/Verstehen/Warten viel einfacher.
7. Das href="#" im <a> ist sinnfrei. Wenn du etwas in einer bestimmten Weise im Browser dargestellt haben möchtest, solltest du CSS verwenden.
8. Da du deine Daten nicht an einen Server sendest, ist das <form> komplett überflüssig.
9. Es gibt das schöne neue HTML5-Element <output> - das würde ich anstatt dem <div> verwenden.

Zum Schluss könnte dein Code so aussehen:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
a[onclick] {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}
#ergebnis2 {
	display: block;
	border: 1px solid #000000;
	width: 100px;
	height: 20px;
}
</style>
</head>
<body>
	Feld 1: <input type="text" size="40" id="var613"> 
	Feld 2: <input type="text" size="40" id="var614">
	<output id="ergebnis2"></output>
	<a onclick="fktberechnen();">rechnen</a>
	<script>
		function fktberechnen(){
			var var613 = parseInt(document.getElementById("var613").value);
			var var614 = parseInt(document.getElementById("var614").value);
			// 2. Formel reinladen + berechnen nach Formel
			var615 = var613*var613*var613*var614/100;
			document.getElementById('ergebnis2').value = var615;
		}
	</script>
</body>
</html>

 

[jstraum]

Tausend dank, aber bitte nicht hauen... ich sehe es einfach nicht... :-(

Das Element ist doch da : var615
// 2. Formel reinladen + berechnen nach Formel
((var613*var613*var613))*(var614/100)=var615;

Ist es relevant, dass erst die berechnung und dann das ergebnis kommt??

ich steig nicht durch...

 

[kkapsner]

Das Element ist doch da : var615

Die Variable ist da, aber nicht das Element im HTML mit der ID "var615".

Ist es relevant, dass erst die berechnung und dann das ergebnis kommt?

Ja - das ist auch ein Fehler.

PS: Vorher ist anscheinend der Link nicht reingekommen: Fehlerkonsole

 

[jstraum]

Ich habe es jetzt noch einmal geändert. Muss aber noch ein Fehler drin sein, sieht den jemand?

      <script type="text/javascript">
        <!--        
        // 1. Variablen festlegen/reinladen, dynamisch in PHP durchlaufen
        function fktberechnen() {}
            
          var var82, var83, var84, var85, var86, var87, var88,  varleer; 
          varleer = "";                  
          var var82 = document.getElementById('var82').value;
var var83 = document.getElementById('var83').value;
var var84 = document.getElementById('var84').value;
var var85 = document.getElementById('var85').value;
                                                                    
          // 2. Formel reinladen + berechnen nach Formel
          var var87=var84+(2*var82)+0.6;
var var88=var83+(2*var82)+0.6;
var var86=var88*var87*var85;          
document.getElementById('var86').innerHTML = var86;
document.getElementById('var87').innerHTML = var87;
document.getElementById('var88').innerHTML = var88;
                                                
        }
        -->
      </script>

Ähm, mit der Fehlerkonsole hab ich Probleme, muss ich mir erst noch genauer anschauen...

danke.

- - - Aktualisiert - - -

oh nein, ich bin so blind.... oben ist die klammer versehentlich gleich wieder geschlossen.... oh man...