jQuery - zamiana z JS - konwerter jednostek

Question

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();

});

 

Comments

A co dokładnie nie działa? Ogólnie fajnie byłoby zobaczyć to w całości, online.

---

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...

---

Używaj funkcji edytora do wstawiania bloczków kodu na przyszłość – dzięki temu kod będzie o wiele czytelniejszy.

Answer 1

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.

Comments

Dziękuję serdecznie za tak jasne wytłumaczenie! :)

wszystko działa :)

---

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);
}

 

---

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.