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?

<input type="number" name="gomba" step="0.1" value="2" min="1" max="100">


var g = 2 * document.getElementById('gomba').value;
próbáltam így is:

<head>
 <title>recept</title>
</head>


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:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
  </body>
</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:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input type="text" id="szam" />
    <input type="text" id="eredmeny" />
  </body>
</html>
Az egyik mezőnk a szám, a másik az eredmény. Eddig jó, tegyük hozzá a scriptet:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input type="text" id="szam" />
    <input type="text" id="eredmeny" />
    <script>
      var g = 2 * document.getElementById('szam').value;
      document.getElementById('eredmeny').value = g;
    </script>
  </body>
</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:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input type="text" id="szam" />
    <input type="text" id="eredmeny" />
    <script>
      var esemenykezelo = function() {
        var g = 2 * document.getElementById('szam').value;
        document.getElementById('eredmeny').value = g;
      };
    </script>
  </body>
</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.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input type="text" id="szam" />
    <input type="text" id="eredmeny" />
    <script>
      var esemenykezelo = function() {
        var g = 2 * document.getElementById('szam').value;
        document.getElementById('eredmeny').value = g;
      };
      document.getElementById('szam').addEventListener('keyup', esemenykezelo, false);
    </script>
  </body>
</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!