niedziałający prosty przelicznik

0

Witam, nie mogę zrozumieć, gdzie mógłby być błąd w tym kodzie?

<h1>Kalkulator kosztów wynajmu autokaru</h1> <br />
           Proszę podać ilość dni, na jaką chce Pan/Pani wynająć autokar (pełną liczbę) <br />
           <input type="text" id="czas" name="czas" /> <br />
           Proszę podać długość trasy do pokonania <br />
           <input type="text" id="trasa" name="trasa" /> <br />
           Proszę podać na jaką ilość osób potrzebny jest autokar
           <br />
           <input type="radio" id="liczba_osob" name="liczba_osob" value="1"> mały - 20 osobowy
           <br />
           <input type="radio" id="liczba_osob" name="liczba_osob" value="1.5"> duży - 40 osobowy
           <br />
           <input type="button" onclick="liczKoszt()" value="Policz koszt" />
           <br />
           Prognozowany koszt wynajęcia autokaru w podanej opcji: <input type="text" id="wynik" name="wynik" value="0" /> zł

           <script>

                zmienna1 = document.getElementById("czas");
                zmienna2 = document.getElementById("trasa");
                zmienna3 = document.getElementById("liczba_osob");

               function liczKoszt() {
                   var wynik1 = (600 * zmienna1 + zmienna2) * zmienna3; //mały autokar
                   
                   wynik2 = document.getElementById('wynik');
                   wynik2.value = wynik1;
                   
               }

           </script>

Wynik jaki otrzymuję to NaN co chyba znaczy, że zmienna nie jest liczbą
Proszę o pomoc

3

Po pierwsze - o ile funkcja liczKoszt wykona się po wciśnięciu klawisza, to samo przypisanie wartości do zmiennych 1, 2 i 3 (swoją drogą - mógłbyś te nazwy poprawić na coś w stylu "ileDni" albo coś bardziej opisowego) odbywa się natychmiast po odpaleniu strony, zanim użytkownik będzie miał okazję cokolwiek wprowadzić.

A po drugie - korzystając z getElemementById nie otrzymujesz wartości wpisanej w element, ale odnośnik do samego elementu. Żeby dostać wartość, powinieneś wpisać zmienna1 = document.getElementById("czas").value. Masz rację - NaN nie jest liczbą - wynika to z tego, co napisałem przed chwilą (czyli z tego, że nie pobierasz wartości pola, ale odnośnik do pola, przy użyciu którego dopiero możesz sobie tą wartość pobrać).

2

A poza tym to jest takie fajne narzędzie - nazywa się http://jsfiddle.net. Umożliwia ono wrzucanie, udostępnianie oraz testowanie na żywo skryptów JavaScript.
Wrzuciłem Twój kod tam - masz link: https://jsfiddle.net/g6fu7bs5/1/
Jak coś poprawisz zgodnie z sugestiami podanymi przeze mnie w poprzednim poście, to najlepiej wrzuć wynik swojej pracy na jsfiddle i podeślij link :)

0 
<body style="background: darkolivegreen;">

<input type="text" id="time"/>
<button id="btn">btn</button>

let time = document.getElementById('time');
let btn = document.getElementById('btn');

btn.onclick = function() {
  console.log(typeof (time.value)); // string
  let convert_to_number = (time.value|0);
  console.log(convert_to_number); // typeof convert_to_number => number
  console.log(typeof (parseInt(time.value, 10))); // number
};

</body>

Jeśli chcesz operować na typie number, to musisz dokonać konwersji na ten typ. O ile się nie mylę, wszystko co pochodzi z formularza, czy ogólnie ze znaczników HTML jest traktowane jako typ string. Konwersję odnośnie bitowego OR pokazał @Gynvael_Coldwind na jednym ze swoim stream'ów.
Gynvael's Stream 16:13

1

Dziękuje za odpowiedź, już wcześniej próbowałem dopisywać słowo "value", lecz wtedy program całkowicie przestawał działać, a wystarczyło zmienić miejsce w kodzie wczytywania zmiennych :)

0

Czyli rozumiem, że teraz wszystko już działa ok? Problem rozwiązany?

1 użytkowników online, w tym zalogowanych: 0, gości: 1