Problem:Zugriff auf Ausgabefeld (HTML-Formular))

Jo.Mo.

Aktives Mitglied
Hallo, ich habe aktuell ein Problem mit einem Programm, dass ich dank der Prima Hilfe hier schon weitestgehend lösen konnte.

Nun habe ich ausgend vom Ur-Programm nochmal die Berechnung als Funktion verpackt, und ich möchte die Ein- und Ausgabe als HTML-Formular umsetzen.

Eingabe und die berechnung sollten soweit eigentlich funktionieren, nur mit der ausgabe hapert es. Das lliegt wahrscheinlich an meinem Verständnis, was ich in der Funktion als Rückgabewert realisieren soll bzw. wie ich beim Ausgabefeld darauf zurückgreife.

Kann mir da jemand helfen?

Hier das Programm:

Java:
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Minimum dreier Zahlen</title>
     <script type="text/javascript">
	 //<![CDATA[
	 
	     /*
         (1) Deklaration von z1, z2, z3, mina
         (2) Gib z1 ein
         (3) Gib z2 ein
         (4) Gib z3 ein
         (5) Wenn z1 < z2 
           dann setze mina := z1
             sonst setze mina := z2
         (6) Wenn mina < z3 
             gib minb zurück
             sonst z3
          */
		  
		 //Funktion zur Berechnung 
		  function minimum (x,y,z){
		     var min = 0
			 var z1 = parseInt( document.forms['f1'].Zahl1.value);
			 var z2 = parseInt( document.forms['f1'].Zahl2.value);
			 var z3 = parseInt( document.forms['f1'].Zahl3.value);
			 if (x<y) min = x;
		     else min = y;
		     if (min<z) return min;
		     else min = z;
			 return min;
			 document.forms['f1'].mini.value = min;
		  }
         	  
     //]]>
	 </script>
   </head>
<body>
  <form id="f1" action="Programm.html">
    <p>
      <label for="z1">Erste Zahl: </label>
          <input type="text" id="z1" name="Zahl1"/><br />
	  <label for="z2">Zweite Zahl: </label>
         <input type="text" id="z2" name="Zahl2"/><br />
      <label for="z3">Dritte Zahl: </label>
         <input type="text" id="z3" name="Zahl3"/><br />	  
      <button type="button" onclick="minimum()">Minimum berechnen</button><br />
	  <label for="min">Minimum: </label>
		 <input type="text" id="min" name="mini" readonly="readonly"/><br/>
    </p>
  </form> 
</body>
</html>
 
Die Zuweisung wird aufgrund von der
Code:
return
Anweisung nicht ausgeführt. Du solltest also vllt die Zuweisung des Ergebnisses in onclick machen.
 
Danke für den Tip. Aber wie stelle ich das am besten an? Mittels minimum(return)?

EDIT: Ich hab jetzt komplett meine Unterlagen durchgesehen, auch im Web habe ich nichst brauchbares gefunden (jedenfalls nichts, was das einsteigergerecht erläutern würde...).

Kann mir da jemand einen Tip geben? Wo das Problem liegt, weiss ich ja selber, die spezifizierung dessen hilft mir nicht, da ich an der Umsetzung bzw. dem Verständnis scheitere.

Wenn ich wüsste, in welcher Form ich das document.forms gestalten muss, bzw. wie ich dem einen Wert der Berechnung (als im genannten Falle "min", den Minimalwert), wäre mir schon geholfen. Der Abschnitt im body müsste doch sonst stimmen, oder?
 
Zuletzt bearbeitet:
Also da sind ein paar Dinge im Argen. Versuchs mal so:
Java:
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Minimum dreier Zahlen</title>
     <script type="text/javascript">
     //<![CDATA[
     
         /*
         (1) Deklaration von z1, z2, z3, mina
         (2) Gib z1 ein
         (3) Gib z2 ein
         (4) Gib z3 ein
         (5) Wenn z1 < z2 
           dann setze mina := z1
             sonst setze mina := z2
         (6) Wenn mina < z3 
             gib minb zurück
             sonst z3
          */
          
         //Funktion zur Berechnung 
          function minimum (){
             var min = 0
             var z1 = parseInt( document.forms['f1'].Zahl1.value);
             var z2 = parseInt( document.forms['f1'].Zahl2.value);
             var z3 = parseInt( document.forms['f1'].Zahl3.value);
             if (z1<z2) min = z1;
             else min = z2;
             if (min<z3){
	         }
             else min = z3;
             document.forms['f1'].mini.value = min;
          }
              
     //]]>
     </script>
   </head>
<body>
  <form id="f1" action="Programm.html">
    <p>
      <label for="z1">Erste Zahl: </label>
          <input type="text" id="z1" name="Zahl1"/><br />
      <label for="z2">Zweite Zahl: </label>
         <input type="text" id="z2" name="Zahl2"/><br />
      <label for="z3">Dritte Zahl: </label>
         <input type="text" id="z3" name="Zahl3"/><br />      
      <button type="button" onclick="minimum()">Minimum berechnen</button><br />
      <label for="min">Minimum: </label>
         <input type="text" id="min" name="mini" readonly="readonly"/><br/>
    </p>
  </form> 
</body>
</html>

Erklärung:
Dein Code hatte Argumente in der Funktion erwartet, beim Buttonclick wurde die Funtion ohne Argumente aufgerufen.
Diese Argumente x,y,z wurden nirgendwo definiert und waren somit "undefined". Trotzdem hast du sie in den IF Abfragen verwenden wollen.
Deine Funktion sollte einen Wert mittels "return" zurückgeben? Zurück wohin? Zum Button der die Funktion aufgerufen hat? Kann der nichts mit anfangen.

Generelle Funktionsweise:
Beim Click auf den Button werden drei Textfelder ausgelesen und ein Ergbnis in ein viertes Feld geschrieben. Da liegt es doch auf der Hand ALLE diese Vorgänge in der Funktion abzuarbeiten.

Kurzum:
Eine Argumentenlose Funktion liest bei Buttonclick drei Felder aus, berechnet das Minimum und setzt dieses Minimum in das vierte Feld.
 

Zurück
Oben