Kurs JavaScript cz.2 - moja refaktoryzacja i zabawa listenerami

pytanie zadane 10 maja 2016 w JavaScript przez Monster Początkujący (430 p.)

Program udało mi się parę razy wywołać, sam nie wiem jak. Teoretycznie wszystko było dobrze, wyświetlały się liczby z określonego w inputach zakresu. Po odświeżeniu strony przeglądarka nie usuwała wartości z pamięci. Zdaje że układ procedur jest niewłaściwy, czegoś mi nie wczytuje...

<!DOCTYPE html>
<html lang="pl">
    <head>
        <title>CW.2 - ZALENT</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <input type="text" placeholder="mniejsza liczba" id="ml" />
        <input type="text" placeholder="większa liczba" id="wl" />
        <input type="submit" value="Click Me!" id="button"/>
        <div id="info"></div>
    </body>
</html>

function buildContent() {
    var liczba1 = document.getElementById("ml").value;
    var liczba2 = document.getElementById("wl").value;
    var button = document.getElementById("button");
    var tab = "";
 
    button.addEventListener("click", function() {        
            for (i=liczba1; i<liczba2; i++) {
                tab = tab + i + " ";
            }
            document.getElementById("info").innerHTML = tab;
        }
    );
}
window.addEventListener("DOMContentLoaded", buildContent);

1 odpowiedź

odpowiedź 10 maja 2016 przez ScriptyChris Mędrzec (190,190 p.)
edycja 10 maja 2016 przez ScriptyChris

Po pierwsze, skrypt z <head> przenieś na koniec tagu <body>. Wtedy EventListener "DOMContentLoaded" jest zbędny (masz tylko jeden skrypt, więc tu akurat jest to zbędne).

Co do problemu. Pobierasz wartość input w momencie gdy jest pusty (na początku skryptu) W momencie, gdy wciskasz przycisk, to liczba1 i liczba2 są puste, a gdy parsujesz sobie to na Number, wtedy wychodzi po prostu 0.

Dlatego po pierwsze, deklaracje i inicjalizacje zmiennych liczba1 oraz liczba2 przesuń do środka button.addEventListener(...). Wtedy będzie działać.Po drugie, w pętli daj słówko var dla iteratora ("i") - unikaj zmiennych globalnych, zwłaszcza przypadkowo tworzonych.

Rzecz ostatnia, w HTML. Zamiast <input type="submit"> wystarczy po prostu <button>.

Całość powinna wyglądać mniej więcej tak:

HTML:

<!DOCTYPE html>
<html lang="pl">
    <head>
        <title>CW.2 - ZALENT</title>
        <meta charset="utf-8">
    </head>
    <body>
        <input type="text" placeholder="mniejsza liczba" id="ml" />
        <input type="text" placeholder="większa liczba" id="wl" />
        <button id="button">Click Me!</button>
        <div id="info"></div>
      
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

JavaScript:

    var button = document.getElementById("button");
    var info = document.getElementById("info");

    button.addEventListener("click", function() {
      var liczba1 = Number(document.getElementById("ml").value);
      var liczba2 = Number(document.getElementById("wl").value);
      var tab = "";

      for (var i = liczba1; i < liczba2; i++) {
        tab = tab + i + " ";
      }
      info.innerHTML = tab;
    });

[edit]

Jeszcze można przerzucić tworzenie zmiennej tab do EventListenera, aby po każdym kliknięciu przycisku nowy wynik działania pętli "nadpisywał" poprzedni. Bo inaczej, to nowy wynik zostanie dopisany do poprzedniego, a wtedy to nie jest czytelne.