• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Kalkulator liczący na żywo/w locie

VPS Starter Arubacloud
+1 głos
1,473 wizyt
pytanie zadane 30 kwietnia 2015 w JavaScript przez testerius Pasjonat (23,960 p.)

No hej, od pewnego czasu piszę prosty kalkulator, który oblicza koszty jednostek. Chciałbym jednak zmienić działanie, ponieważ na chwilę obecną wygląda to tak:

- użytkownik podaje ilość w formularzu

- klika przycisk... no i obliczane są koszty

- demo: http://codepen.io/testerius/pen/NqWMRa (sporo powtórzeń, ale mniejsza o to :P)

No i teraz o co mi chodzi, w jaki sposób zrobić, aby po wpisaniu ilości w input od razu automatycznie były aktualizowane wartości, całkowicie chcę się pozbyć inputa submit. Wpisuję dane powiedzmy dla spearman i wylicza mi koszty. Jak za to się zabrać?

 

EDIT: Proszę nie przejmować się kodem HTML, jest to tylko tymczasowe, w prawdziwym projekcie wygląda to inaczej.

4 odpowiedzi

+1 głos
odpowiedź 30 kwietnia 2015 przez Mizukage Pasjonat (21,730 p.)
edycja 30 kwietnia 2015 przez Mizukage

No to może event listenery? np. z  'keyup'

 

Przenalizuj ten kod, na pewno znajdziesz wteedy rozwiazanie ;)

http://codepen.io/quzziy/pen/bddBda

komentarz 30 kwietnia 2015 przez testerius Pasjonat (23,960 p.)
Kod może i jest dobry, jednak dla początkującej osoby jak ja stanowi sporą zagadkę, ale spokojnie zaraz wrzucę moje własne rozwiązanie i prosiłbym o ocenę. Jeszcze tylko to przetestuje. :P
komentarz 30 kwietnia 2015 przez Mizukage Pasjonat (21,730 p.)
Chodzilo mi o podpiecie nasłuchiwacza zdażen na keyup do jakiejs funkcji
+1 głos
odpowiedź 1 maja 2015 przez nefil1m Stary wyjadacz (10,690 p.)
edycja 1 maja 2015 przez nefil1m

Jeśli chodzi o klikanie strzałek (w którejś odpowiedzi czytałem) to dodajesz sobie kolejny listener 'change'.

A jeśli chodzi o wpisywanie tylko liczb i tylko dodatnich możesz zrobić:
 

document.getElementById("spearman").addEventListener("keydown", tw2Calc); //ważne żeby tu było keydown

//a do swojej funkcji dopisujesz:
function tw2Calc(e) {
  e.preventDefault();

  if(e.keyCode > 95 && e.keyCode < 106) {
  e.target.value += e.key;
    
    /* w tym miejscu ta logika co już ją napisałeś */

  }

  return false;
}

Jak to działa?

Przechwytujesz event i zatrzymujesz jego spełnienie `preventDefault()` następnie sprawdzasz czy znak jest cyfrą i jeśli tak dodajesz tą cyfrę do wartości inputa i dalej funkcja sobie leci tak jak ją napisałeś.

 

Jedyne co musisz zrobic to dodać else if na np backspace, żeby inputa dało się wyzerować :)

komentarz 1 maja 2015 przez testerius Pasjonat (23,960 p.)
Dzięki na pewno się przyda. ;)
0 głosów
odpowiedź 30 kwietnia 2015 przez elaen Gaduła (4,760 p.)
Nie przychodzi mi inne słowo do głowy niż ajax, ale niestety nie pomoge Ci w rozwiązaniu ponieważ naprawde brak mi czasu. Ale poszukaj w google calculator ajax napewno cos znajdziesz ;)
komentarz 30 kwietnia 2015 przez testerius Pasjonat (23,960 p.)
No ajax raczej nie chcę używać, bo po prostu jeszcze nie dotarłem do takiego poziomu, dopiero co zacząłem się uczyć JS. :P
0 głosów
odpowiedź 30 kwietnia 2015 przez testerius Pasjonat (23,960 p.)
edycja 30 kwietnia 2015 przez testerius

Ok, pogrzebałem trochę w sieci i trafiłem na podobne wątki, jednak rozwiązania w nich niezbyt pasowały do tego co chciałem otrzymać. Znalazłem jeden dosyć prosty kod, który prawie robił to co chcę, jednak miał tą wadę, że po wpisaniu wartości w input trzeba było gdziekolwiek kliknąć poza inputem aby program "załapał" - jak dla mnie dosyć upierdliwe i niezbyt "user friendly", ale mniejsza o to. :)

Z pomocą przyszedł mi http://www.w3schools.com/jsref/event_onkeyup.asp a dokładniej to przykład object.addEventListener("keyup", myScript);

Stworzyłem to co chciałem, można zobaczyć demo: http://codepen.io/testerius/pen/MwwbEd

Gdyby ktoś mógł jeszcze to przetestować czy faktycznie działa to jak należy, no mi się wydaje, że tak.

Oczywiście brakuje istotnej rzeczy jaką jest walidacja. Macie może pomysł jak się zabezpieczyć formularz tak aby przyjmował tylko wartości >=0 oraz gdy ktoś nie wpisze nic to działa to tak jak teraz (czyli traktuje jako 0)? Niestety dodanie do inputa pattern="\d+" nie działa. :P

No i jeszcze kolejna kwestia to skrypt nie działa, gdy zmieniamy wartości za pomocą strzałek - macie jakiś pomysł jak to naprawić?

komentarz 30 kwietnia 2015 przez Mizukage Pasjonat (21,730 p.)
No o tym ci przeciez pisalem ;)
komentarz 30 kwietnia 2015 przez criss Mędrzec (172,590 p.)
Nie pomogę ci w niczym, tylko napisze jako tester :P

U mnie to działa w ten sposób, że wyniki są aktualizowane dopiero po wciśnięciu enter. Z tego co pisałeś, zrozumiałem, że liczyć ma się "w locie" czyli równocześnie z wpisywaniem. Czyli w zasadzie nic się nie zmieniło, bo przyciski też reagują na entera. Korzystam z chrome-a
komentarz 30 kwietnia 2015 przez testerius Pasjonat (23,960 p.)
A to jaja, na Firefox działa w locie, ale jak przyjde do domu to sprawdzę u siebie na Chrome i innych przeglądarkach. To mnie teraz zasmuciłeś. :(
komentarz 30 kwietnia 2015 przez criss Mędrzec (172,590 p.)
Tak myslalem, że to wina przeglądarki :c
komentarz 30 kwietnia 2015 przez criss Mędrzec (172,590 p.)
Sorry, za double ale chce zebys powiadomienie dostał.

Na firefoxie też działa mi tak samo jak na chromie. Mało tego - jeśli pole tekstowe nie jest aktywne (tylko zmieniam wartosci strzałkami), to na enter też nie reaguje. Moze mam inna wersje FF, nie wiem.
komentarz 30 kwietnia 2015 przez testerius Pasjonat (23,960 p.)

No hej, sprawdziłem na Chrome oraz FF i dobrze działa, tak jak to opisałem w odpowiedzi. 

"No i jeszcze kolejna kwestia to skrypt nie działa, gdy zmieniamy wartości za pomocą strzałek - macie jakiś pomysł jak to naprawić?"

Z założenia, gdy wpisujesz w inpucie wartości (oczywiście liczbowe, prosto z klawiatury, np. 100) to automatycznie liczone są koszty, możesz dopisywać/zmieniać i działa to jak należy - sprawdź u siebie o ile możesz, bo bardzo mnie to zastanawia jakim cudem u ciebie może to nie działać. :P

Problem z aktualizowaniem wartości występuje tylko w przypadku, gdy chcesz zmienić wartość za pomocą strzałek - wtedy musisz kliknąć enter, aby wyświetliła się obliczona wersja. We wcześniejszym wpisie właśnie o to pytałem, jak sobie z tym poradzić, aby strzałki również działały. Oczywiście mogę się ich pozbyć zmieniając input na text, ale jednak wolałbym zachować number ze względu na lepszy UX na urządzeniach mobilnych.

 

Podobne pytania

0 głosów
0 odpowiedzi 712 wizyt
pytanie zadane 11 kwietnia 2020 w Offtop przez Krasik Nowicjusz (120 p.)
0 głosów
1 odpowiedź 29,949 wizyt
0 głosów
1 odpowiedź 290 wizyt
pytanie zadane 24 października 2017 w C i C++ przez Kifu Nowicjusz (160 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...