Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Help with 'document.getElementById.onclick' not firing

    Help needed with the below simple JS code to hide/Show a paragraph.
    document.getElementById.onclick event is not firing.

    Code:
    function Toggle(id) {
    obj=document.getElementById(id);
    if (obj.style.display=='none') obj.style.display='block';
    else obj.style.display='none';
    }
    obj2=document.getElementById('Q1');
    obj2.onclick=Toggle('Ans1');
    HTML CODE IS as follows:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Help</title>
    <script language="javascipt" type="text/javascript" src="/scripts/FAQ.js">
    </script>//THis FAQ.js contains the above JS code of Toggle function.
    <script language="javascipt" type="text/javascript">
    function HideAll() {
    var parags=document.getElementsByTagName('p');
    for(i=0;i<parags.length;i++) {
    parags[i].style.display='none'; }
    }
    window.onload=HideAll;
    </script>
    <link rel="stylesheet" type="text/css" href="/css files/formatting.css">
    </head>
    <body>
    <h2>E-Shopping FAQS</h2>
    <ul>
    <li><a href="#" id="Q1">Question 1</a></li>
        <p id="Ans1">Here is your answer</p>
    
    <li><a href="#" id="Q2">Question 2</a></li>
        <p>Here is your answer.</p>
    </ul>
    </body>
    </html>
    In love with PHP,Mysql & Javascript

  • #2
    New Coder
    Join Date
    Feb 2009
    Location
    Jakarta, Indonesia
    Posts
    93
    Thanks
    2
    Thanked 20 Times in 20 Posts
    Code:
    window.onload=function(){
    	HideAll();
    	var obj2=document.getElementById('Q1');
    	obj2.onclick=function(){
    		Toggle('Ans1');
    	}
    }

  • Users who have thanked gun5 for this post:

    satish_j (02-09-2009)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    <li><a href="#" id="Q1">Question 1</a></li>
    <p id="Ans1">Here is your answer</p>

    <li><a href="#" id="Q2">Question 2</a></li>
    <p id = "Ans2" >Here is your answer.</p>

  • #4
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by gun5 View Post
    Code:
    window.onload=function(){
    	HideAll();
    	var obj2=document.getElementById('Q1');
    	obj2.onclick=function(){
    		Toggle('Ans1');
    	}
    }
    gun5,thanks 4 your help..
    It is working perfectly now,but I want to know what exactly,was wrong with my code.
    MY code was working fine if i assigned the click event directly in html page to the link,but if i was assignig the same through JS as shown above,it was not working(even though i was following the guidelines of JS tutorial).
    The Javascript tutorial says that one should assign event handlers unobstrusively i.e in JS code.
    In love with PHP,Mysql & Javascript

  • #5
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Still expecting for an answer for my above query..
    Also,i tried changing the JS code a bit to work the DOM way as follows:
    Code:
    function HideAll() {
    	var parags=document.getElementsByTagName('p');
    	for(i=0;i<parags.length;i++) {
    	parags[i].style.display="none"; }
    	//alert(parags.length);
    }
    
    function Toggle(e) {
    	var targ;
    	if(!e) e=window.event;
    	if(e.target) targ=e.target.id;
    	if(e.srcElement) targ=e.srcElement.id;
    	var obj=document.getElementById(targ);
    	var vParent=obj.parentNode;
    	var next=vParent.nextSibling;
    	while(next.nodeType==3) next=next.nextSibling;
    	//alert(next.nodeName);
    	if(next.style.display=='none') next.style.display='block';
    	else next.style.display='none';
    }
    
    window.onload=HideAll;
    Html code is same with only little diff as follws:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Help</title>
    <script language="javascipt" type="text/javascript" src="/scripts/FAQ.js">
    </script>
    <link rel="stylesheet" type="text/css" href="/css files/formatting.css">
    </head>
    <body>
    <h2>E-Shopping FAQS</h2>
    <ul>
    <li><a href="#" id="Q1" onClick="Toggle(event)">Question 1</a></li>
        <p>Here is your answer</p>
    
    <li><a href="#" id="Q2">Question 2</a></li>
        <p>Here is your answer.</p>
    </ul>
    </body>
    </html>
    Problem with above method is that it does not work in IE,while it works perfectly in FF.
    IE returns the nextSibling as 'LI' always.
    Requesting some help on above??
    By the way,I am now getting very much interested in Javascript...This forum has really increased my interest in JS.
    In love with PHP,Mysql & Javascript

  • #6
    New Coder
    Join Date
    Feb 2009
    Location
    Jakarta, Indonesia
    Posts
    93
    Thanks
    2
    Thanked 20 Times in 20 Posts
    Hi satish_j,

    I'm not sure about that but, javascript is an interpreted language. So it will interpreted the programming language as a sequence. If it found a mistake, return error. When you define obj2=document.getElementById('Q1');
    it will return null because, the interpreter cannot find that object.

    I'm sure Philip M, has the better explanation for your answer

    I think is IE incorrect implementation in DOM, but try:
    Code:
    function Toggle(e){
    	e = e || event;
    	var targ = e.target? e.target : e.srcElement;
    	targ = targ.id;
    	var obj=document.getElementById(targ);
    	var vParent= obj.parentNode.parentNode;
    	var oUl = document.getElementsByTagName(vParent.nodeName)[0];
    	var oAll = oUl.getElementsByTagName("*");
    	for(j=0;j<oAll.length;j++){
    		if(oAll[j] == obj){
    			j++;
    			if(oAll[j]){
    				if(oAll[j].style.display=='none') {
    				oAll[j].style.display='block';
    				}else{
    				oAll[j].style.display='none';
    				}
    			}
    		}
    		
    	}
    }

  • #7
    New Coder
    Join Date
    Aug 2008
    Location
    India
    Posts
    88
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks gun5,
    I found out that IE does not take the next element after an LI,it directly picks the next element of same node type,whereas FF properly checks the next element after LI.
    Once again here,IE sucks...
    So,I modified my html page so as to contain the <P> inside <LI> as follows:
    Code:
    <ul>
    <li><a href="#" id="Q1" onClick="Toggle(event)">Question 1</a>
        <p>Here is your answer</p></li>
    
    <li><a href="#" id="Q2">Question 2</a>
        <p>Here is your answer.</p></li>
    </ul>
    ..and then I used the lastChild property instead of nextSibling in the JS code as follows:
    Code:
    var vParent=obj.parentNode;
    var next=vParent.lastChild;	
    if(next.style.display=='none') next.style.display='block';
    else next.style.display='none';
    This solved my problem as both IE and FF returned the <P> tag for lastChild.
    Thanks all for your time.
    Bye...
    In love with PHP,Mysql & Javascript

  • #8
    New Coder
    Join Date
    Feb 2009
    Location
    Jakarta, Indonesia
    Posts
    93
    Thanks
    2
    Thanked 20 Times in 20 Posts
    Hi satish_j,

    I agree with that. (IE.DOM == "SUCK!")


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •