Confusing onclick event parentNode & childNode

[BaseballGraphs]

Hello,

I came across a challenging onclick event that I am unable to make sense of. The whole code is:

<div id="showPNG"><span onclick="RGraph.showPNG(event.target.parentNode.childNodes[3])">Get PNG</span></div>

The usage of this can found here: http://dev.rgraph.net/examples/tradar.html.

Could someone please explain to me what this means and how to customize it for my own site?

Thanks.

[JKing]

The onclick event calls the function showPNG which belongs to the RGraph object. This function takes an html 5 canvas and produces a png from it. This function has an optional parameter to specify the canvas to be used.

event.target.pa rentNode.childN odes[3] is the canvas.

Event is an object created when an event is thrown with details about the event.

Target is a property of the event object that returns the element that triggered the event.

ParentNode is a property of an element that returns the element that it is contained in. For example: <div><span></span></div> The parent node of the span would be the div.

ChildNodes is a property of an element that returns an array of elements that are contained within that element. For example:

<div id="parent">
   <div id="child1"></div>
   <div id="child2"></div>
   <div id="child3"></div>
</div>

The div with id="parent" has three children. And it's childNodes array would hold the three div elements child1, child2 and child3.

[BaseballGraphs]

My div structure is setup as follows:

<div id="parent">
   <div id="child1">
        <div id="child1.child1"></div>
        <div id="child1.child2"></div>
        <div id="child1.child3"></div>
</div>
</div>
<div id="parent">
   <div id="child1"></div>
   <div id="child2"></div>
   <div id="child3"></div>
   <div id="child4"></div>
   <div id="child5"></div>
   <div id="child6"></div>
   <div id="child7"></div>
</div>

I am trying to set this onclick event for the objects contained within child7. That is where my graph is found. How would I refer to this given the structure you explained above?

Thanks!

[BaseballGraphs]

Could someone assist me in helping configure this onclick function

RGraph.showPNG(event.target.parentNode.childNodes[3])

I am trying to use this onclick function on this page: http://tyrone.pae.me/frontend.php?p=863&s=1.

Could someone please help me configure the onclick function so that it refers to the canvas?

Thanks so much for your help.

[BaseballGraphs]

The operation can be performed successfully by using the following syntax:

<span onclick="RGraph.showPNG(document.getElementById('myLine'), event);">Get PNG</span>