JS/HTML - funkcja wypisująca wartości od 1 do liczby n, wpisanej w polu tekstowym

0

Witam. Jest to mój pierwszy wątek na forum, więc proszę o wyrozumiałość.
Napisałem prosty program, który powinien wypisywać wartości od 1 do n, która podana jest w polu input (domyślnie ustawiona na 55)

<!DOCTYPE=HTML>
    <html lang = "pl">
        <head>
            <meta charset="utf-8">

            <title>Test</title>

            <style>
                    div{border: 1px solid black;}
            </style>

        </head>

        <body>
                <button onclick="funB3()">1 .. n</button>
                <div id='ramka'></div>
                n=<input name='n' value=55 type=number>

        </body>

        <script>
          function funB3()
        {
            var z = document.querySelector("ramka")
            var liczba = " ";
            var n = querySelector('input').value;
            n = Number(n);
            for (let i = 1; i<=n ; i++ )
            {
                liczba = liczba+i+" ";
            }
            z.innerHTML = liczba;
        }
        </script>

Problem w tym ze po kliknięciu na przycisk nic sie nie dzieje. Z góry dziękuje za pomoc!

1

document.querySelector("#ramka")
albo
document.getElementById("ramka")

1

@kacper1234: Nie pisz "nadal nic" :) w kodzie który zaprezentowałeś jest kilka błędów. Użycie odpowiedniej funkcji document.xx z odpowiednimi wartościami naprawiło jeden z nich. Teraz pora na kolejne.

Otwórz narzędzia developerskie (na chrome to jest Ctrl+Shift+J) i wybierz zakładkę Console. Są tam jakieś błędy?

1

Problemem myślę jest to, że querySelector() zwraca "listę obiektów", a nie jeden z nich (tak jak getElementById()).

Za to Ty w tym kodzie odnosisz się do jej wyniku jak do pojedynczego elementu. Moja propozycja: zmień wszystkie użycia querySelector na Document.getElementById().

I wklej kod, jeśli nadal nie działa.

0

Zamieniłem na .getelementByID. W konsoli nie wykryło żadnych błedów.

<!DOCTYPE=HTML>
    <html lang = "pl">
        <head>
            <meta charset="utf-8">

            <title>Test</title>

            <style>
                    div{border: 1px solid black;}
            </style>

        </head>

        <body>
                <button onclick="funB3()">1 .. n</button>
                <div id='ramka'></div>
                n=<input name='n' value=55 type=number>

        </body>

        <script>
          function funB3()
        {
            var z = document.getElementById("ramka")
            var liczba = " ";
            var n = document.getElementById('input').value;
            n = Number(n);
            for (let i = 1; i<=n ; i++ )
            {
                liczba = liczba+i+" ";
            }
            z.innerHTML = liczba;
        }
        </script>
1

W konsoli nie wykryło żadnych błedów.

Nieprawda: po naciśnięciu przycisku w konsoli pojawia się TypeError: document.getElementById(...) is null.

Gdzie u Ciebie znajduje się input z id input? :-)

1

Dziękuje bardzo za pomoc. Wstawiam końcowy program, który działa jak powinien :)

<!DOCTYPE=HTML>
    <html lang = "pl">
        <head>
            <meta charset="utf-8">

            <title>Test</title>

            <style>
                    div{border: 1px solid black;}
            </style>

        </head>

        <body>
                <button onclick="funB3()">1 .. n</button>
                <div id='ramka'></div>
                n=<input id="input" value=55 type=number>

        </body>

        <script>
          function funB3()
        {
            var z = document.getElementById("ramka")
            var liczba = " ";
            var n = document.getElementById('input').value;
            n = Number(n);
            for (let i = 1; i<=n ; i++ )
            {
                liczba = liczba+i+" ";
            }
            z.innerHTML = liczba;
        }
        </script>

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