Wątek przeniesiony 2023-04-11 09:40 z JavaScript przez Riddle.

Komendy w konsoli developerskiej

0

Witam, ostatnio postanowiłem zacząć programować (hobbistycznie), wczoraj pierwszy raz napisałem jakąś bardzo prostą stronę za pomocą HTML i CSS. Postanowiłem dodaj na niej element zaprogramowany w JavaScript, lecz gdy próbuję wpisać jakąś komendę, ta nie pokazuje się na stronie.Bez tytułu.png
Czy jest ktoś w stanie pomóc mi to naprawić?
Tak wygląda fragment kodu HTML.

<!DOCTYPE html>
<html>
    <head>
        <title>Barcelona</title>
        <link rel = "stylesheet" href ="style.css"/>
    </head>
    <body>
        <header>
            <h1>Barcelona</h1>
            <a class="button" href="#more">Czytaj dalej</a>
                <div class="switch">
                    <button aria-label="Przełącznik trybu nocnego">
                        <div class="icon"></div>
                    </button>
                </div>
        </header>
        <main>
    <section class="more" id="more">
                <h2>Barcelona</h2>
                    <p></p>
            </section>
        </main>
        <script src="app.js"></script>
    </body>
</html>

Kod JavaScript

document.querySelector ("button");

console.log("test");

Dodam jeszcze że korzystam z programu Visual Studio Code oraz że gdy spisuję komendę w "document.querySelector ("button");" w konsoli w przeglądarce to komenda działa.

0

ale gdzie i co się ma pokazać? Wpisywanie komend w konsoli powoduje jednoczesne wyświetlenie wartości wyrażenia, więc:

document.querySelector ("button");

wpisane w konsoli to odpowiednik:

console.log(document.querySelector ("button"));

w skrypcie, a

console.log("test")

w konsoli to odpowiednik

console.log(console.log("test"))

Jeśli chcesz żeby działało tak jak w konsoli to każdą linijkę skyptu owiń w console.log. Ale to nie najlepszy sposób debugowania - w visual code możesz ustawiać breakpoiny, zatrzymywać wykonywanie, wykonywać kod linijka po linijce i podglądać wartości w dowolnej chwili.
W normalnym kodzie pewnie chcesz przypisać wynik pierwszego wyrażenia do zmiennej (var / let / const) i coś z nim potem zrobić.
Proponuję przerobić jeszcze parę lekcji z jakiegoś tutoriala zanim zaczniesz zadawać pytania na forum

0

Gdzie miałoby Ci się to pokazać? W tym kodzie JavaScript pobierasz wszystkie elementy button nawet ich nigdzie nie przypisując, a potem wypisujesz w konsoli "test" co widać poprawnie na screenie

0

Bez tytułu.png
brakuje mi takiego zapisu, żeby po wsianiu komendy ta znalazła dany obiekt. Ściągnąłem również gotową stronę która zawiera taki przełącznik i po wklejeniu tamtych kodów to w javascript wyskakują błędy.

0

Już wszystko udało mi się wyjaśnić. Po prostu kod działa lecz się nie wyświetla.

0

Nie baw się w querySelector, używaj wszędzie querySelectorAll()[].
Nie używaj małych liter w querySelectorAll, wszędzie duże.
document.querySelector("BUTTON") - wskazuje Ci na przycisk ale nic z nim nie robi, komenda np. mogła by wyglądać tak - document.querySelectorAll("BUTTON")[0].innerText="Ala ma kota, ala zwariowała".

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