getElementById + css style.color; dlaczego wywala błąd?

pytanie zadane 27 lipca 2017 w JavaScript przez Konfeusz Bywalec (2,810 p.)

Witam.

Znowu pewnie z pierdułką... a mianowicie.

mam diva a w nim <div><p id="komunikat"></p></div> oraz script:

let komunikatBlad = document.getElementById("komunikat").innerHTML = "walka nie mogła się rozpocząć";
komunikatBlad.style.color = 'red';

co prawda wyświetla komunikat, ale na czarno, a w konsoli to:

Cannot set property 'color' of undefined

Czy może mi ktoś wytłumaczyć o co mu chodzi? Z góry dziękuje.

2 odpowiedzi

odpowiedź 27 lipca 2017 przez imklau Nałogowiec (42,090 p.)

daj to normalnie w osobnych linijkach

let komunikatBlad = document.getElementById("komunikat");
komunikatBlad.innerHTML = 'walka nie mogła się rozpocząć';
komunikatBlad.style.color = 'red';

komentarz 27 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Nie wiem co to za element ten #komunikat ale skoro ustawiasz mu węzeł tekstowy to prawdopodobnie zamiast innerHTML mógłbyś użyć po prostu textContent (jest to szybsza metoda i lepiej wskazująca co chcesz ustawić).

komentarz 27 lipca 2017 przez Konfeusz Bywalec (2,810 p.)

Działa dzięki. W sumie na logikę należało to rozbić.

Abstrahując, jaka jest różnica między innerHTML a textContent? Tak po ludzku.

komentarz 27 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Na przykład tym, że metoda innerHTML inaczej przetwarza DOM, gdy metoda textContent po prostu operuje wyłącznie na modyfikacji węzła tekstowego. Zobacz sobie np.:

https://codepen.io/anon/pen/xLGBqL?editors=1010#0

W obu przypadkach jako wartość węzła ustawiam tekst między znacznikami <b>, które teoretycznie powinny spowodować pogrubienie tekstu, ale tak się nie dzieje :)

(to tylko przykład, nie bijcie za <b> zamiast CSS :)

komentarz 27 lipca 2017 przez Konfeusz Bywalec (2,810 p.)

Czaje ;)... dzięki.

komentarz 27 lipca 2017 przez imklau Nałogowiec (42,090 p.)

jeszcze jest innerText, ale rozumiem, że tego już całkowicie się nie używa? ;)

komentarz 27 lipca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

innerText nie jest standardem i jest to "stworek potworek" naszej ulubionej, ukochanej przeglądarki IE :)

Jeśli musisz wspierać stare IE to prawdopodobnie będzie trzeba zrobić alternatywę dla braku textContent ale ja np. odpuszczam sobie obecnie stare IE (z tego co pamiętam to chyba nawet jQuery nowe już nie wspierają starych IE ale tu nie dam sobie ręki uciąć, bo nie używam na co dzień jQuery).

komentarz 27 lipca 2017 przez imklau Nałogowiec (42,090 p.)

tak właśnie myślałam, dzięki ;)

odpowiedź 27 lipca 2017 przez ForeverFriendzone Dyskutant (7,520 p.)
edycja 27 lipca 2017 przez ForeverFriendzone

Popatrz tutaj jak to działa: https://fiddle.jshell.net/eo4rvpLr/1/

Pozdrawiam :D !

komentarz 27 lipca 2017 przez imklau Nałogowiec (42,090 p.)

pytanie całkowicie, jako offtop.... z jakigo języka wziąłeś słówko comunicat?

komentarz 27 lipca 2017 przez ForeverFriendzone Dyskutant (7,520 p.)

Mój błąd- ale wstyd :D

komentarz 27 lipca 2017 przez imklau Nałogowiec (42,090 p.)

sama przez chwilę się zastanawiałam, czy nie użyć angielskich nazw w tym przykładzie, ale zrezygnowałam ;p a później patrzę, że Ty użyłeś i aż musiałam szukać czy takie słówko istnieje, bo nie wiedziałam :<

aale luuz