Javascript "это" через разные сферы
Пожалуйста, прочитайте и попробуйте код ниже. Нажмите на пункт "foo". Глядя на консоль браузера, я не вижу ожидаемых результатов, в то время как, если я нажимаю "бар", я вижу.
Почему это происходит?
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div class="root">
<div>
<p id="foo">foo</p>
</div>
<p id="bar">bar</p>
</div>
<script type="text/javascript">
var p_list = document.getElementsByTagName('P');
for (var n=0; n<p_list.length; n++) {
p_list[n].onclick = function() {
console.log('ONCLICK - id: ' + this.id + ' - ' + getC( this ) + '\n');
};
}
function getC( P ) {
if (P.parentNode.className === 'root') {
console.log('INSIDE FUNCTION - id: ' + P.id + ' - ' + P.parentNode);
return P.parentNode;
} else {
getC( P.parentNode );
}
}
</script>
</body>
</html>
Живой код: http://jsbin.com/izuleg/1/edit
3 ответа
Вы просто скучаете по return утверждение в вашем else пункт. Так должно быть:
...
} else {
return getC( P.parentNode );
}
Обратите внимание, что вы используете рекурсивную функцию (функцию, которая вызывает себя), поэтому вам, вероятно, следует добавить дополнительные меры предосторожности, чтобы она возвращала что-то в исключительных случаях (например, нет узла с классом "root"), в противном случае вы ' Вы получите бесконечную рекурсию и ошибку переполнения стека.
Вы пропустили <div> а также </div> теги, пожалуйста, проверьте:
<div class="root">
<div>
<p id="foo">foo</p>
</div>
<div>
<p id="bar">bar</p>
</div>
</div>
Вот твоя ошибка. Вы должны вернуть результат getC вместо того, чтобы просто вызывать его.
function getC( P ) {
if (P.parentNode.className === 'root') {
console.log('INSIDE FUNCTION - id: ' + P.id + ' - ' + P.parentNode);
return P.parentNode;
} else {
return getC( P.parentNode );
}
}