Problem ze skryptem.

pytanie zadane 11 kwietnia 2022 w Sieci komputerowe, internet przez Grazyna2000 Nowicjusz (140 p.)
edycja 11 kwietnia 2022 przez Eryk Andrzejewski

Witam,czy wie ktos dla czego skrypt podczas klikania,żeby obliczal, wyskakuje NAN?

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: brown;
            color: white;
        }

        div {
            text-align: center;
            font-size: 30px;
        }

        input {
            font-size: 20px;
        }

        button {
            font-size: 20px;
        }

        h1 {

        }
    </style>
  </head>
  <body>
      <div>
          <h1> PIZZERIA</h1>
        <form action="">
            <label for="kilometry">Ilość kilometrów</label>
            <input type="text" name="kilometry" id="kilometry" />
    
            <label for="zaznaczono">Jestem z Warszawy</label>
            <input type="checkbox" name="zaznaczono" id="zaznaczono" />
    
            <button onclick="pokazTekst()" type="button">Ile płacę?</button>
            <span id="tekst"></span>
          </form>
      </div>

      <script>
        var zaznaczono = document.getElementById("zaznaczono").checked;
        var tekst = document.getElementById("tekst");
        var dystans = document.getElementById("kilometry").value;
      
        function pokazTekst() {
          if (zaznaczono) {
            tekst.innerHTML = "Dowóz jest darmowy";
          } else {
            var cena = parseInt(dystans) * 2;
            tekst.innerHTML = "Dowóz będzie cię kosztował " + cena + " złotych";
          }
        }
      </script>
  </body>
</html>

1	komentarz 11 kwietnia 2022 przez Eryk Andrzejewski Mędrzec (164,260 p.) Tak na przyszłość, bloczki kodu w stylu markdowna (czyli wewnątrz ```) nie działają, zamiast tego należy użyć bloczek kodu, oznaczony jako {...} code.

2 odpowiedzi

odpowiedź 11 kwietnia 2022 przez Eryk Andrzejewski Mędrzec (164,260 p.)

Problem polega na tym, że odczyt wartości z inputa wykonuje się tylko raz, podczas ładowania strony, a później po każdym kliknięciu w przycisk korzystasz z tej samej, wtedy odczytanej wartości. A trzeba zauważyć, że podczas pierwszego załadowania strony to pole jest puste, więc parseInt() zwróci NaN.

Żeby to naprawić, przenieś linię:

var dystans = document.getElementById("kilometry").value;

do wnętrza funkcji pokazTekst().

Wtedy wartość zmiennej dystans będzie zawsze aktualna

odpowiedź 11 kwietnia 2022 przez VBService Ekspert (252,660 p.)
edycja 11 kwietnia 2022 przez VBService

Moim zdaniem, żeby formularz prawidłowo podawał informację o kwocie za dostawę, wartości

        var zaznaczono = document.getElementById("zaznaczono").checked;
        var dystans = document.getElementById("kilometry").value;

muszą być odczytywane po wywołaniu funkcji pokazTekst()

propozycja zmian

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        background-color: brown;
        color: white;
      }

      div {
        text-align: center;
        font-size: 30px;
      }

      input {
        font-size: 20px;
      }

      button {
        font-size: 20px;
      }

      h1 {

      }
    </style>
  </head>
  <body>
    <div>
      <h1> PIZZERIA</h1>
      <form action="">
        <label for="kilometry">Ilość kilometrów</label>
        <input type="text" name="kilometry" id="kilometry" />

        <label for="zaznaczono">Jestem z Warszawy</label>
        <input type="checkbox" name="zaznaczono" id="zaznaczono" />

        <button onclick="pokazTekst()" type="button">Ile płacę?</button>
        <span id="tekst"></span>
      </form>
    </div>

    <script>
      const tekst = document.getElementById("tekst");

      function pokazTekst() {
        const zaznaczono = document.getElementById("zaznaczono").checked || false;
        const dystans = parseInt(document.getElementById("kilometry").value.trim()) || null;
        
        let komunikat = 'Proszę podać ilość kilometrów';
        if (zaznaczono)
          komunikat = 'Dowóz jest darmowy';
        else
          if (dystans || dystans > 0) {
            const cena = parseInt(dystans) * 2;
            komunikat = 'Dowóz będzie cię kosztował ' + cena + ' złot';
            komunikat += (['2','3','4'].includes(cena.toString().slice(-1))) ? 'e':'ych';
          }          

        tekst.innerHTML = komunikat;
      }
    </script>
  </body>
</html>