Jak namierzać elementy w pliku Html po Id?

pytanie zadane 9 lutego 2021 w HTML i CSS przez kajman_Rrzeczny Użytkownik (960 p.)
zmienione kategorie 9 lutego 2021 przez ScriptyChris

Chciałbym za pomocą Js zaleźć element (Tag) w pliku Html po np. Id by np. dodać mu jakąś funkcje. Tak wygląda kod Js:

let element = document.getElementById("coffe");

console.log(element);

kod Html (tag o id coffe):

chcę by konsola wyświetliła mi cały tag czyli:

konsola w przeglądarce zwraca mi null, czyli tak jakby zmienna element przechowuje dosłownie nic, jakby w pliku Html nie było tagu button o id coffe. zacząłem uczyć się programować Js by dodać swoim stronom interakcji. znam już podstawy tegoż języka i dotarłem do tego momentu i od kilku dni stoję w miejscu, po co mi Js skoro nie mogę go wykorzystać na moich stronach (wiem że od jakiegoś czasu Js może być odpalany w wielu środowiskach ale ja chcę zacząć od przeglądarek i stron internetowych.) Niech ktoś mi pomoże bo boje się że za jakis czas się poddam i dam se z tym spokój, zawsze rozwiązywałem takie duże duże problemy i dawałem rade ale teraz nie wiem nawet gdzie szukać odpowiedzi

<!DOCTYPE html>
<html lang="en">
<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>
    <script type="text/javascript" src="skrypty.js"></script>
</head>
<body>
    
        <button id="coffe" type="button">kk</button>
        <p id="fury">tank</p>
    
</body>
</html>

let element = document.getElementById("coffe");
console.log(element);

nie wiem w czy problem, w składni? może problem leży w plikach lub w ścieżkach do nich? nie wiem.

link do pliku Html - https://drive.google.com/file/d/14vk98n51xrdj8B56RV1VwylFTatQOsxv/view?usp=sharing

link do pliku Js - https://drive.google.com/file/d/1zaasRbVNu9hLFV1ykYap6lqtOYj5romN/view?usp=sharing

screenshot konsoli i mojego edytora z kodem:

można też np. wstawić jakąś wartość do tego elementu za pomocą innerText / innerHTML (chyba)

komentarz 10 lutego 2021 przez VBService Ekspert (253,400 p.)

Jakiś czas temu w innym kontekście padło podobne pytanie.

Jeżeli kod javascript znajduje się (w trakcie ładowania strony) przed elementem html (w tym przypadku <video>) to document.getElementById("myVideo") wykona się "wcześniej" i dlatego "nie widzi" tego znacznika.

Pierwsze rozwiązanie: ...

1 odpowiedź

odpowiedź 9 lutego 2021 przez lateM Pasjonat (17,660 p.)
wybrane 11 lutego 2021 przez kajman_Rrzeczny

Najlepsza

Czy próbowałeś zalinkować plik js przed tagiem zamykającym </body>? Sprawdź, czy zadziała. Wydaje mi się, że js się odpala - szuka elementu, a potem dopiero wczytuje się reszta strony - w tym szukany button.

3	komentarz 9 lutego 2021 przez pablop76 VIP (123,180 p.) Możesz również użyć artybutu defer lub metody DOMContentLoaded

komentarz 9 lutego 2021 przez kajman_Rrzeczny Użytkownik (960 p.)

@MateuszB, Dzięki wielkie za pomoc, dwa pytanka mam

czy ludzie zawsze odpowiadają na pytania tak szybko czy to raczej zależy?

tacy użytkownicy jak ty za darmo odpowiadają na pytania?

komentarz 9 lutego 2021 przez lateM Pasjonat (17,660 p.)

"Tacy jak ja" za darmo :D inni nie wiem. Akurat przeglądałem forum. To dobry sposób na naukę.

Wydaje mi się, że jeśli chodzi o JS, to zawsze w miarę szybko ktoś powinien się pojawić i pomóc.

Największym czynnikiem, który utrudnia udzielenie dobrej i szybkiej odpowiedzi są często sami pytający, którzy np. nie zaznaczają czego już próbowali, żeby rozwiązać dany problem, albo nie wklejają kodu do pytania...

komentarz 10 lutego 2021 przez Tomek Sochacki Ekspert (227,510 p.)

Największym czynnikiem, który utrudnia udzielenie dobrej i szybkiej odpowiedzi są często sami pytający, którzy np. nie zaznaczają czego już próbowali, żeby rozwiązać dany problem, albo nie wklejają kodu do pytania...

Ja bym do tego jeszcze dodał, że wiele osób wrzuca pytania webowe do kategorii C/C++ i przyznam, że osobiście nie pracuję zawodowo z C więc jeśli temat nie wskaże jasno że chodzi o web to czasem nawet nie patrzę na takie wątki...