469,935 Members | 1,455 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,935 developers. It's quick & easy.

Confusing onclick event parentNode & childNode

Hello,

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

Expand|Select|Wrap|Line Numbers
  1. <div id="showPNG"><span onclick="RGraph.showPNG(event.target.parentNode.childNodes[3])">Get PNG</span></div>
  2.  
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.
Oct 20 '10 #1

✓ answered by BaseballGraphs

The operation can be performed successfully by using the following syntax:
Expand|Select|Wrap|Line Numbers
  1. <span onclick="RGraph.showPNG(document.getElementById('myLine'), event);">Get PNG</span>
  2.  

4 3757
JKing
1,206 Expert 1GB
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.parentNode.childNodes[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:
Expand|Select|Wrap|Line Numbers
  1. <div id="parent">
  2.    <div id="child1"></div>
  3.    <div id="child2"></div>
  4.    <div id="child3"></div>
  5. </div>
  6.  
The div with id="parent" has three children. And it's childNodes array would hold the three div elements child1, child2 and child3.
Oct 20 '10 #2
My div structure is setup as follows:

Expand|Select|Wrap|Line Numbers
  1. <div id="parent">
  2.    <div id="child1">
  3.         <div id="child1.child1"></div>
  4.         <div id="child1.child2"></div>
  5.         <div id="child1.child3"></div>
  6. </div>
  7. </div>
  8. <div id="parent">
  9.    <div id="child1"></div>
  10.    <div id="child2"></div>
  11.    <div id="child3"></div>
  12.    <div id="child4"></div>
  13.    <div id="child5"></div>
  14.    <div id="child6"></div>
  15.    <div id="child7"></div>
  16. </div>
  17.  
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!
Oct 20 '10 #3
Could someone assist me in helping configure this onclick function
Expand|Select|Wrap|Line Numbers
  1. RGraph.showPNG(event.target.parentNode.childNodes[3])
  2.  
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.
Oct 23 '10 #4
The operation can be performed successfully by using the following syntax:
Expand|Select|Wrap|Line Numbers
  1. <span onclick="RGraph.showPNG(document.getElementById('myLine'), event);">Get PNG</span>
  2.  
Oct 24 '10 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Andreas Knollmann | last post: by
17 posts views Thread by Mike Gratee | last post: by
3 posts views Thread by f1crazed | last post: by
5 posts views Thread by moondaddy | last post: by
5 posts views Thread by Stuart Shay | last post: by
11 posts views Thread by Daz | last post: by
3 posts views Thread by Michael_R_Banks | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.