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

jQuery - zamiana z JS - konwerter jednostek

VPS Starter Arubacloud
+1 głos
218 wizyt
pytanie zadane 12 sierpnia 2021 w JavaScript przez carinchen6 Nowicjusz (130 p.)
edycja 12 sierpnia 2021 przez Comandeer

Hej,

posiadam napisaną aplikację konwerter jednostek w js (po wprowadzeniu kilometrów w polu mile pojawia się przeliczona wartość) i muszę ją przerobić na jquery(nie miałam z tym doczynienia).

Poproszę o jakiś kierunek co może być źle:
 

function kilToMil(){

    let kil

    kil = document.getElementById('mi').value

    mil = Math.round((0.6213727366498067 * kil)*100) / 100;

    document.getElementById('mi').value = mil

}


 

$(function kilToMil(){

    let $kil = $("km");

    kil = $('#km').val();

    mil = Math.round((0.6213727366498067 * kil)*100) / 100;

    $('#mi').val();

});

 

komentarz 12 sierpnia 2021 przez Comandeer Guru (604,400 p.)
A co dokładnie nie działa? Ogólnie fajnie byłoby zobaczyć to w całości, online.
komentarz 12 sierpnia 2021 przez carinchen6 Nowicjusz (130 p.)
edycja 12 sierpnia 2021 przez Comandeer

Aplikacja w html posiada 2 inputy:

       

 <div class="speed">Konwerter prędkości

            <input type="number" id="km" onkeyup="kilToMil()" placeholder="wprowadź numer" />

            <input type="number" id="mi" onkeyup="milToKil()" placeholder="wprowadź numer" />

        </div>


Po wprowadzeniu do pierwszego z nich wartości np. 1 aplikacja w drugim inpucie powinna wprowadzić przeliczoną wartość (z km na mil). W .JS to działa. W html dla jquery zmieniłam jeszcze onkeyup na keyup. W konsoli nie ma żadnych błędu, ale kod nie działa...

komentarz 12 sierpnia 2021 przez Comandeer Guru (604,400 p.)
Używaj funkcji edytora do wstawiania bloczków kodu na przyszłość – dzięki temu kod będzie o wiele czytelniejszy.

1 odpowiedź

+1 głos
odpowiedź 12 sierpnia 2021 przez Comandeer Guru (604,400 p.)

W przypadku jQuery funkcja powinna zostać taka sama, bez owijania w $. Owinięcie funkcji w $ jest równoznaczne z jej wywołaniem przy wczytaniu strony. Dodatkowo na końcu nie ustawiasz wartości pola #mil a ją pobierasz. Żeby ustawić wartość, należy ją przekazać jako argument do metody val, czyli $( '#mil' ).val( mil ).

Natomiast przypięcie funkcji kilToMil do pola może zostać zostawione tak jak było, jako onkeyup. Chociaż o wiele lepiej byłoby wykorzystać odpowiednią metodę jQuery od tego, $.on, dzięki której można przypiąć obsługę dowolnego zdarzenia do wybranego elementu. Ogólnie też o wiele lepiej byłoby tutaj zadziałać ze zdarzeniem input zamiast keyup (bo to drugie reaguje tylko na naciśnięcie klawiszy, a to pierwsze zareaguje też np. na wklejenie czegoś do pola przy pomocy menu kontekstowego).

Zauważ też, że zarówno w kodzie JS, jak i w kodzie jQuery, nie deklarujesz zmiennej mil, co oznacza, że staje się tzw. implied global – zmienną, która jest dostępna w przestrzeni globalnej. Warto to poprawić, bo taki kod nie będzie działał w niektórych sytuacjach.

komentarz 12 sierpnia 2021 przez carinchen6 Nowicjusz (130 p.)
Dziękuję serdecznie za tak jasne wytłumaczenie! :)

wszystko działa :)
komentarz 12 sierpnia 2021 przez VBService Ekspert (255,440 p.)
edycja 12 sierpnia 2021 przez VBService

Możesz użyć "mechanizmu": inline event handler w ten sposób i skrócić swój jquery kod, w tym przypadku.

<div class="speed">Konwerter prędkości

  <input type="number" id="km" onkeyup="kilToMil(this.value)" placeholder="wprowadź numer" />
  ...

</div>

 

function kilToMil(kil) {
  const mil = Math.round((0.6213727366498067 * kil)*100) / 100;
  $('#mi').val(mil);
}

 

1
komentarz 12 sierpnia 2021 przez Comandeer Guru (604,400 p.)

Akurat ja bym proponował zupełnie odwrotne podejście i przeniesienie tego całkowicie do jQuery przy pomocy $.on. Trzymanie definicji event handlerów w HTML-u generuje bardzo dużo problemów – od najbardziej podstawowego, jakim jest mieszanie kodu HTML z JS-em (co utrudnia modyfikowanie JS-a i wymusza przy każdej zmianie w JS-ie także zmianę w HTML-u), do bardziej złożonych problemów z bezpieczeństwem. Ogólnie dobra praktyka jest taka, by JS trzymać w JS-ie, nie w HTML-u.

Podobne pytania

0 głosów
2 odpowiedzi 396 wizyt
pytanie zadane 23 sierpnia 2017 w JavaScript przez maciej.tokarz Nałogowiec (27,280 p.)
0 głosów
1 odpowiedź 587 wizyt
pytanie zadane 5 sierpnia 2018 w Mikrokontrolery przez Kamil110501 Bywalec (2,490 p.)
0 głosów
0 odpowiedzi 122 wizyt
pytanie zadane 2 maja 2018 w Sprzęt komputerowy przez kevin Mądrala (5,010 p.)

92,830 zapytań

141,771 odpowiedzi

320,817 komentarzy

62,159 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

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!

...