ugrás a tartalomhoz

Változókkal számolás

Aldarin · 2014. Nov. 14. (P), 13.09
Sziasztok! A segítségetek kérném.
Azt szeretném elérni, hogy egy formba beírt értékkel és változókkal számolni tudjak.
Miért nem jó így?
  1. <input type="number" name="gomba" step="0.1" value="2" min="1" max="100">  
  1. var g = 2 * document.getElementById('gomba').value;  
próbáltam így is:
  1. <head>  
  2.  <title>recept</title>  
  3. </head>  
  1. var g = document.recept.gomba.value * 2;  
‹ CKEditor azt sem tudom mit keresek :o ›
 ■
1

ID

Poetro · 2014. Nov. 14. (P), 13.34
Ha id-ra kérdezel, akkor miért nem adsz meg neki id-t?
A második esetben pedig az űrlapnak is kellene adni egy elemet (name), és abban fog keresni
2

JavaScript

janoszen · 2014. Nov. 14. (P), 13.37
Alapvetően az nem elég, hogy kiszámolod az eredményt, azt meg is kell jeleníteni. Induljunk el innen:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head></head>  
  4.   <body>  
  5.   </body>  
  6. </html>  
Ez ugye a szabványos HTML struktúrád. Ha JavaScripttel dolgozol, mindig ügyelj arra, hogy a HTML-ed szabványos és a kódod szépen struktúrált legyen, különben végeláthatatlan hibakeresésekbe ütközöl.

Adjuk hozzá az szövegmezőt:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head></head>  
  4.   <body>  
  5.     <input type="text" id="szam" />  
  6.     <input type="text" id="eredmeny" />  
  7.   </body>  
  8. </html>  
Az egyik mezőnk a szám, a másik az eredmény. Eddig jó, tegyük hozzá a scriptet:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head></head>  
  4.   <body>  
  5.     <input type="text" id="szam" />  
  6.     <input type="text" id="eredmeny" />  
  7.     <script>  
  8.       var g = 2 * document.getElementById('szam').value;  
  9.       document.getElementById('eredmeny').value = g;  
  10.     </script>  
  11.   </body>  
  12. </html>  
Mint látható, az id paraméterre keresünk. Természetesen kereshetnénk name vagy class alapján is. Ha most lefuttatjuk a kódot, ezen a ponton rájövünk, hogy gyanúsan nem csinál semmit.

A hiba felderítésére nyissuk meg a böngészőnk debug eszközeit. Chrome esetén ez a JavaScript Console vagy JavaScript Konzol. Itt váltsunk a Sources vagy Források fülre (remélem, így hívják). Töltsük újra az oldalt hogy megjelenjen a forrás. Helyezzünk el egy kattintással egy piros pontot a var g =... sorba. Ez az úgynevezett breakpoint vagy töréspont, azaz amikor ide ér a program végrehajtásában a böngésző, meg fog állni és megvizsgálhatjuk a tényállást.

Ha újratöltjük most az oldalt, látni fogjuk, hogy közvetlenül az oldal betöltése után megáll a break pointon a program, de ha tovább kattintjuk a play gombbal, akkor soha többet. Tehát a program helyesen működik, csak nem jókor, bármit írunk a mezőbe, nem fog változni az eredmény.

Hogy ezt orvosoljuk, meg kell ismerkedni az eseménykezelőkkel vagy event listenerekkel. Ezek azt csinálják, hogy egy adott esemény hatására végrehajtanak egy programkódot. Először is, csomagoljuk a végrehajtani kívánt kódot egy függvénybe:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head></head>  
  4.   <body>  
  5.     <input type="text" id="szam" />  
  6.     <input type="text" id="eredmeny" />  
  7.     <script>  
  8.       var esemenykezelo = function() {  
  9.         var g = 2 * document.getElementById('szam').value;  
  10.         document.getElementById('eredmeny').value = g;  
  11.       };  
  12.     </script>  
  13.   </body>  
  14. </html>  
Eddig remélhetőleg semmi bonyolult nem történt. A trükk most jön, adjuk hozzá az eseménykezelőt. Ezt az addEventListener függvényhívással tehetjük meg.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head></head>  
  4.   <body>  
  5.     <input type="text" id="szam" />  
  6.     <input type="text" id="eredmeny" />  
  7.     <script>  
  8.       var esemenykezelo = function() {  
  9.         var g = 2 * document.getElementById('szam').value;  
  10.         document.getElementById('eredmeny').value = g;  
  11.       };  
  12.       document.getElementById('szam').addEventListener('keyup', esemenykezelo, false);  
  13.     </script>  
  14.   </body>  
  15. </html>  
Mint látható, a szam mező keyup eseményére reagálunk. Ez azért fontos, mert a keyup eseménykor már benne lesz az érték a mezőben, amíg például a keydown eseménykor még nem.

Ha mindent jól csináltunk, akkor remélhetőleg működni fog a program és minden billentyűleütésre frissíti az eredmény mezőt. A biztonság kedvéért ellenőrizzük a megfelelő breakpoint alkalmazásával is.
3

THX

Aldarin · 2014. Nov. 14. (P), 23.23
Nagyon szépen köszönöm!