[ROZWIĄZANE] querySelector nie wykrywa parentElement

Question

Witam!

Piszę program w JavaScript, i napotkałem na poniższy błąd:

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLButtonElement.<anonymous>

Wiem co on oznacza, że element, którego style chcę zmienić ma wartość "null". (Jeśli źle rozumiem, będę wdzięczny za poprawkę). Lecz nie rozumiem dlaczego ma wartość "null".

Poniżej kod:

<!--HTML-->
<tr><td class="firstCell" id="mainElement"><button type="button" id="firstButton">przycisk</button></td></tr>

Proszę zauważyć, że element "#btower1" ma element nadrzędny, który też ma id (mainElement).

const btn = document.querySelector("#firstButton");
    
btn.addEventListener("click", function() {
            
    const cell = document.querySelector(firstButton.parentElement.id);

    console.log(cell);// null

    cell.style.backgroundColor = "#00FF00";  //Uncaught TypeError: Cannot read property 'style' of null
    at HTMLButtonElement.<anonymous>
});

Z góry dziękuję za wszelką pomoc!

Answer 1

Po pierwsze, zmienna firstButton nie jest nigdzie zadeklarowana, więc obstawiam, że nie rzuca przy niej błędu z powodu niejawnej jej obecności pod postacią zmiennej globalnej → https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object

Natomiast, chcąc pobrać element po id korzystając z metody document.querySelector, powinieneś podać identyfikator poprzedzony znakiem #, o czym zapomniałeś w → document.querySelector(firstButton.parentElement.id)

To powinno zadziałać:

document.querySelector(`#${firstButton.parentElement.id}`)

Przy czym nie ma potrzeby pobierać elementu td querySelectorem, bo przecież ta komórka jest parentem przycisku, więc powinno wystarczyć const cell = firstButton.parentElement

Comments

Dziękuję bardzo! Jeszcze wcześniej, coś namieszałem, jest

 firstButton.parentElement.id

a miało być:

 btn.parentElement.id

Ale zmieniłem, tak jak Pan zalecił

w 

const cell = firstButton.parentElement

Pozdrawiam!