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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Problem calling a function, to hide/show comments

    So in the past I've mostly just copy and pasted other JavaScript functions I needed, and made slight modifications based on my exact needs. However, this time I couldn't find anything that would work with what I wanted to do (show and hide comments on news stories in a particular way), so I decided to just make my own.

    After a few hours of messing around with it, I'm quite exasperated, because what I have looks like it should work, but for some reason I can't identify, doesn't.

    Here's the function I'm trying to use:

    Code:
    <script language="javascript" type="text/javascript">
    Function showComments(articleID) {
    
    	//Get all rows affected, based on tag congruent with articleID
    	var allRows = document.getElementByID(articleID).getElementsByTagName('tr');
    
    	//Run through all rows
    	For (var i = 0; i < allRows.length; i++) {
    
    		//show hidden comments
    		If (allRows[i].className == 'commenthide') {
    
    			allRows[i].className = 'commentshow';
    
    		}
    
    		//or, hide shown comments
    		Else If (allRows[i].className == 'commentshow') {
    
    			allRows[i].className = 'commenthide';
    
    		}
    	}
    
    }
    </script>
    Essentially what it should do is, find the table with the ID of the news article whose comments are being toggled, then find all the rows in the table that are labeled as comments, and either show them or hide them, based on their current state (as defined by their class with a "display: none;" in it or not).

    I have this link to call the function, then:

    Code:
    <a class=\"newsfooterL\" href=\"javascript:showComments('".$articleID."')\">show comments (".$numcomments.") [+]</a>
    Obviously it uses PHP, but I know that's not the problem; it just uses the article's ID number to pass on which comments need to be hidden/shown to the function.

    From everything I've looked up, this should work, but doesn't. Something peculiar, though, is that the function looks like it's not even being called; I put a simple alert('Test'); in the function, and still nothing happened when I clicked the link. So maybe my function is fine in itself, but I'm just calling it in an incorrect manner? I don't know, which is why I'm so exasperated.

    If someone could please take a look and say what they think, even if it's just a basic thing as "Dude, you put a semicolon in the wrong place," I'd really appreciate it!

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    "Dude, Javascript is case sensitive."

    Replace Function, For, If and Else with function, for, if and else. That should at least get you started.

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Heh, well. I guess that's kind of what I wanted the problem to be, but also kind of not at the same time. More embarrassing.

    I suppose I just never actually read that anywhere, and hadn't really noticed it was an essential part of JavaScript. Like I said, this is my first time actually creating a JavaScript function that wasn't 95% copy-paste.

    Well that did get the function called at least, as my test alert started popping up, so thanks! However, the meat of the function still isn't working. I believe something's wrong with my "for" loop there.

    Here's my new function, then:

    Code:
    	<script language="javascript" type="text/javascript">
    	function showComments(articleID) {
    
    		//Get all comments affected, based on tag congruent with commentID/articleID
    		var allRows = document.getElementByID('articleID').getElementsByTagName('tr');
    
    			//Run through all rows
    			for (var i=0; i<allRows.length; i++) {
    
    				alert('Got to this point.');
    
    				//show hidden comments
    				if (allRows[i].className == 'commenthide') {
    
    					allRows[i].className = 'commentshow';
    
    				}
    
    				//or, hide shown comments
    				else if (allRows[i].className == 'commentshow') {
    
    					allRows[i].className = 'commenthide';
    
    				}
    			}
    
    	}
    	</script>
    The alert in the "for" there isn't popping up, so I believe the problem's centered around there. The problem itself is probably something that I easily overlooked again in my ignorance, but I would appreciate any further suggestions if I don't get it working myself soon! Also thanks again for your protip, venegal.

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Same problem, it's getElementById, not getElementByID; I didn't notice that before.

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I finally got it working! And it turned out to be only a number of small problems, with my core function actually being, for the most part, correct. As I kind of figured would turn out to be the case.

    Thanks for your help, though even after changing all the casing, it still wasn't working. But it turned out to simply be that my variable wasn't being called correctly, as it was enclosed it in quotations, when it's apparently not supposed to be. Whoops.

    Well, here is my final, working code, then:

    Code:
    	<script language="javascript" type="text/javascript">
    	function showComments(articleID) {
    
    		//Get all comments affected, based on tag congruent with commentID/articleID
    		var allRows = document.getElementById(articleID).getElementsByTagName('tr')
    
    		//Set so as to only change the +/- expander once
    		var expandCheck = 0;
    
    			//Run through all rows
    			for (var i=0; i<allRows.length; i++) {
    
    				//show hidden comments
    				if (allRows[i].className == 'commenthide') {
    
    					allRows[i].className = 'commentshow';
    
    					//change +/- expander if necessary
    					if (expandCheck == 0) {
    
    						var expandID = "expand" + articleID;
    
    						document.getElementById(expandID).innerHTML = "&ndash;";
    
    						var expandCheck = 1;
    
    					}
    
    				}
    
    				//or, hide shown comments
    				else if (allRows[i].className == 'commentshow') {
    
    					allRows[i].className = 'commenthide';
    
    					//change +/- expander if necessary
    					if (expandCheck == 0) {
    
    						var expandID = "expand" + articleID;
    
    						document.getElementById(expandID).innerHTML = "+";
    
    						var expandCheck = 1;
    
    					}
    
    				}
    			}
    
    	}
    	</script>
    The only major thing changed was the inclusion of another section of code that changes the [+] to a [-] after the comments are shown, and then back again when they are hidden. But thanks again venegal, even though all my problems turned out to be "Dude," ones, heh.


  •  

    Posting Permissions

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