Kleine JavaScript Herausforderung

M

mahed

Aktives Mitglied
Thread Starter
Dabei seit
26.03.2006
Beiträge
411
Reaktionspunkte
1
Liebes Forum
Webdesign ist für mich nach wie vor ein Buch mit sieben Siegeln. Was ich versuche ist, dass wenn ich ins erste Feld eine Zahl eingebe und dann auf Submit haue, dass dann das Quadrat davon im rechten Feld erscheint.
Meine ärmlichen Versuche:
Code: 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html>
 4     <head>
 5         <title>Index</title>
 6     </head>
 7 
 8 
 9     <body>
10         
11         <script>
12             function quadrat(inp)
13             {
14                 var result = inp*inp;
15                 //alert("Result of " + inp + " squared is: " + result);
16                 document.quadratForm.fx.value = result;
17             }
18         </script>
19         
20         <form name="quadratForm" action="" onsubmit="quadrat(document.quadratForm.x.value)">
21             <table>
22                 <tr>
23                     <td>Enter x</td>
24                     <td>Function Value</td>
25                 </tr>
26                 <tr> 
27                     <td><input type="text" name="x"></td>
28                     <td><input type="text" name="fx"></td>
29                 </tr>
30             </table>
31             <input type="submit" value="Submit">
32         </form>
33     
34     </body>
35 </html>
36 
37

Die quadrierte Zahl lässt sich zwar für den Bruchteil einer Sekunde im anderen Feld erkennen, aber trotzdem verschwindet sie aus irgendeinem Grund sofort wieder.
Mein Ziel ist es eigentlich, dass wenn ich die Zahl links eingebe, automatisch das Quadrat rechts davon erscheint, und umkehrt wenn ich rechts eine Zahl eingebe dass dann links die Wurzel davon geschrieben wird (also ohne submit). Ich denke dass geht wohl über die "onChange" Methode, allerdings funktionierte das noch weniger.

Vielen Dank für eure Hilfe.
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
     <head>
         <title>Index</title>
     </head>
 
 
     <body>
         
         <script>
             function quadrat(inp)
             {
                 var result = inp*inp;
                 //alert("Result of " + inp + " squared is: " + result); 
                document.getElementById("fx").value = result;
             }
         </script>
         
             <table>
                 <tr>
                     <td>Enter x</td>
                     <td>Function Value</td>
                 </tr>
                 <tr> 
                     <td><input type="text" id="x"></td>
                     <td><input type="text" id="fx"></td>
                 </tr>
             </table>
             <button onclick="quadrat(document.getElementById('x').value)">Los!</button>
         </form>
     
     </body>
</html>

1. document.getElementById()
2. form nicht benutzen, da sie einen Http Request erzeugt, du aber lokal rechnen willst ;)
 
aha, danke.
Und wenn man wie angesprochen die Werte haben möchte, ohne erst einen Button klicken zu müssen? Dh. dass sich die Werte sofort bei Änderung eines der beiden Felder anpassen.
Ist das auch möglich oder bilde ich mir das nur ein?
 
Ähm Klar ?

auf das Input Feld (wo der Wert eingegeben wird) onchange="quadrat(this.value)"
 
Sorry hab mich vertan:
onkeyup

bei onkeypress oder onkeydown geht es nicht, denn das event wird ausgelöst bevor der Wert geändert wird
 
Code: 
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 <html>
  4     <head>
  5         <title>Index</title>
  6     </head>
  7 
  8     <body>
  9     
 10         <script>
 11             function quadrat(inp)
 12             {
 13                 var result = inp*inp;
 14                 //alert("Result of " + inp + " squared is: " + result);
 15                 document.getElementById("fx").value = result;
 16             } 
 17             function wurzel(inp)
 18             { 
 19                 var result = sqrt(inp);
 20                 document.getElementById("x").value = result;
 21         </script> 
 22         <table>
 23             <tr>
 24                 <td>Enter x</td>
 25                 <td>Function Value</td>
 26             </tr>
 27             <tr> 
 28                 <td><input type="text" id="x" onkeyup="quadrat(this.value)"></td>
 29                 <td><input type="text" id="fx" onkeyup="wurzel(this.value)"></td>
 30             </tr>
 31         </table>
 32       
 33         
 34     </body>
 35 </html>
 36 
 37
So ungefähr? Und habe jetzt den Button entfernt. Läuft aber immer noch nicht genau wie erhofft, leider. Danke jedenfalls für das Feedback.
 
Zuletzt bearbeitet:
Code: 
function wurzel(inp)
             { 
                 var result = sqrt(inp);
                 document.getElementById("x").value = result;


Klammer vergessen :p
 
f*ck.
Ok, das ist super. Die Quadratur läuft, jetzt die Umkehrfunktion wär noch der Bringer.
 
f^{-1}(x)=x^{1/2}..., nur die positive wurzel reicht (die Umkehrfunktion f^{-1} zu einer Funktion f ist die Funktion deren Graph die "Spiegelung" des Graphen von f an der 45° Linie ist).
Habs jetzt gerade so hingekriegt, dh. die minimale Funktionalität steht.
Für spätere Generationen:
Code: 
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 <html>
  4     <head>
  5         <title>Index</title>
  6     </head>
  7 
  8     <body>
  9 
 10         <script>
 11             function quadrat(inp)
 12             {
 13                 var result = inp*inp;
 14                 //alert("Result of " + inp + " squared is: " + result);
 15                 document.getElementById("fx").value = result;
 16             }
 17             function wurzel(inp)
 18             {
 19                 var result = Math.sqrt(inp);
 20                 document.getElementById("x").value = result;
 21             }
 22         </script>
 23         <table>
 24             <tr>
 25                 <td>Enter x</td>
 26                 <td>Function Value</td>
 27             </tr>
 28             <tr>
 29                 <td><input type="text" id="x" onkeyup="quadrat(this.value)"></td>
 30                 <td><input type="text" id="fx" onkeyup="wurzel(this.value)"></td>
 31             </tr>
 32         </table>
 33 
 34     </body>
 35 </html>
 36 
 37
 
Ruhig Brauner ich bin zwar gymi aber auch nur 9. Klasse, Wurzel kommt erst in der Zehnten :p
(was nicht heißt das ich mindergut programmieren kann) :D
soll das später in einen Graph ?
 
wollte ich auch nicht andeuten. Bin beeindruckt dass du in der 9. klasse dich mit programmieren beschäftigst, kann nicht schaden.
Evtl. kommt mal ein graph dabei raus, im Moment wollte ich nur mal bisschen Javascript üben. Lass dich nicht drängen, und ja, wurzeln sind nichts anderes als gebrochene Exponenten, kleiner Vorgeschmack;)
An sich ist die sprache ja nicht kompliziert, erst in Verbindung mit HTML fängt es an etwas gewöhnungsbedürftig zu werden.
 
Zurück
Oben Unten