Tworzenie skryptu JavaScript wykorzystującego pola tekstowe – JS1

Cel lekcji

Uczeń potrafi:

  • pobrać dane z formularza HTML
  • zastosować instrukcję warunkową
  • wykonać obliczenia
  • wyświetlić wynik na stronie

Elementy potrzebne do wykonania zadania

1. Pobieranie danych z formularza

document.getElementById("id_elementu").value;

2. Zamiana tekstu na liczbę

Number(wartosc);

3. Tworzenie zmiennych

let nazwa = wartosc;

4. Instrukcja warunkowa

if (warunek) {

} else if (inny_warunek) {

} else {

}

5. Porównywanie wartości

==

6. Działania matematyczne

+   dodawanie
-   odejmowanie
*   mnożenie
/   dzielenie

7. Wyświetlanie wyniku na stronie

document.getElementById("id_elementu").innerHTML = "tekst";

8. Łączenie tekstu z wartością

"tekst " + zmienna

9. Funkcja uruchamiana przyciskiem

function nazwaFunkcji() {

}

10. Wywołanie funkcji w HTML

<button onclick="nazwaFunkcji()">OBLICZ</button>

Zadanie

Napisz skrypt, który:

  • pobiera ilość litrów paliwa
  • pobiera rodzaj paliwa
  • oblicza koszt w zależności od rodzaju
  • wyświetla wynik pod przyciskiem w odpowiednim formacie

Wskazówka

Zastosuj instrukcję warunkową, aby sprawdzić rodzaj paliwa i przypisać odpowiednią cenę.

Zadanie dodatkowe

Zmodyfikuj skrypt tak, aby:

  • dla rodzaju paliwa 3 cena wynosiła 5 zł
  • wynik był zaokrąglony do dwóch miejsc po przecinku