this в функции
 

Здравствуйте. Сразу:

1. только учусь
2. гугл не помог, пробовал

Не работает функция, скорее всего из-за фундаментального пробела в знаниях. Буду признателен за краткое разъяснение.

<div class="parent-div"><h2 onclick="foo()">Some title</h2></div>

function foo() {
this.parentNode.style.background = ('blue');
}

В общем задача покрасить .parent-div кликом по h2. Пример условный, но максимально приближен к боевым условиям.

Консоль заявляет мне: "Uncaught TypeError: Cannot read property 'style' of undefined". Хотя если так:

<h2 onclick="this.parentNode.style.background = ('blue');">Title</h2>

то все работает.
Где именно я не прав?

Заранее мерси.

<div class="parent-div"><h2 onclick="foo(this)">Some title</h2></div>

function foo(elem) {
elem.parentNode.style.background = ('blue');
}

this не передаётся в ф-ю сам по себе при её вызове.

Спасибо. Вот тут и был пробел.

И дабы новых тем не плодить, скажите, конструкция

elem.parentNode.parentNode

является ли правильной, в случае если мне по domу надо на два узла вверх? Она работает, но насколько это правильно?

Можете использовать. если вложенность будет больше, тогда лучше ориентироваться на какой-то селектор.

Еще раз всем спасибо.