Question

I have a set of nested divs:

<div style="border:solid 1px #7F9DB9; height:535px; width:285px;" id="div_master">
                <div onmouseover="" id="a" onclick="div_catlist_mouseclick(this)">a</div>
                <div onmouseover="" id="b" onclick="div_catlist_mouseclick(this)">b</div>
                <div onmouseover="" id="c" onclick="div_catlist_mouseclick(this)">c</div>
                <div onmouseover="" id="d" onclick="div_catlist_mouseclick(this)">d</div>
            </div>

I am calling the function div_catlist_mouseclick(this) event, on mouseclick:

function div_catlist_mouseclick(div) {
        div.style.background = "#316AC5";
        div.style.color = "#fff";

        var x = this.parentNode;
    }

Why is it that I can’t assign parentNode to x, after I pass that line x is always undefined. However, if I examine this.parentNode it shows as an object, with 4 child nodes, which is what I expect…

I am trying to get the child nodes so that I can iterate over them and if they are not the selected node, but have been selected before turn their text and background color back to the defaults. Should be easy right?!

Thanks.

Answer 1

You should use div.parentNode instead of this.parentNode.