Javascript display function only half works

Hey guys, I'm trying to make a function that will display certain elements when a paragraph is clicked. As of right now, the function is called, and only the first line gets executed properly. The rest don't work. $postCount is a counter variable setup by a for loop that it is in. When I view source, it is working properly.

function newComment".$postCount."()
{
document.getElementById('postComment$postCount').style.display = 'none';
document.getElementById('newCommentProfilePicture$postCount').style.display = '';
document.getElementById('commentBox$postCount').style.display = '';
document.getElementById('submitComment$postCount').style.display = '';
document.getElementById('addCommentContainer$postCount').style.display = '';
document.getElementById('commentBox$postCount').rows = '3';
}





echo "<div class='viewComment' id='viewCommentButton".$postCount."'>

<div class='leftCommentControl'>";

if ($numComments > 0)
{
echo "<p class='viewCommentLink' id='viewCommentLink".$postCount."' onclick='showComment".$postCount."()'
onmouseover=\"this.style.textDecoration='underline';
this.style.cursor='pointer'\" onmouseout=this.style.textDecoration='none'>
View ".$numComments." Hidden Comments!</p>";
}

echo "</div>

<div class='rightCommentControl'>

<p class='postComment' id='postComment".$postCount."' onclick='newComment".$postCount."()' onmouseover=\"this.style.textDecoration='underline';
this.style.cursor='pointer'\" onmouseout=this.style.textDecoration='none'>Add Comment</p>

</div>

</div>

<div class='addCommentContainer' id='addCommentContainer".$postCount."' style='display: none'>

<form action='processComment.php?userid=".$_SESSION['userid']."&postid=".$row['postid']."&sentFrom=$currentPage' method='POST'>

<img class='newCommentProfilePicture id='newCommentProfilePicture".$postCount."'
src='uploadPic/mini".$_SESSION['picture']."' style='display: none'></img>

<textarea id='commentBox".$postCount."' class='commentTextArea' name='commentBox'
rows='1' cols='49' onfocus='newComment".$postCount."()'></textarea>

<input type='submit' class='button' id='submitComment".$postCount."' name='submit' ALT='Submit button' value='Comment'
style='display: none'>

</form>

</div>
</div>
</div>";

I am having this exact same problem, i have been racking my brains and asking people for the past 2 days. I think it's something to do with the javascript, or maybe a bit of code that is missing. I have asked a web design tutor and he said that the javascript should work, but he is looking into it. If you do find out what the problem is can you please let me know. I will do the same

Thanks

Ok I've made some progress on this problem. The problem comes from ONE of my directions
document.getElementById('newCommentProfilePicture$postCount').style.display = '';
When I leave this out, all other lines work. The code fails to execute any line after this one. I still have no explanation for why that is, but I'll keep you posted. To poster above, try seeing if one of your lines is causing the problem!

FIXED: It didn't like that I put a CLASS before an ID in the element that wasn't working. I just switched the order and it worked. Hope this help you too.

mine still isn't working properly, i had already put class after ID. When I call 1 of the elements it calls all of them so everything pops up on the screen, its not a problem if you are only using 1 div element on 1 page, i've tried a loop but that doesn't work either.

found something similar, not really what I wanted to use because I have to use "div" and a number e.g "div0", "div1" etc. and I wanted to use full words as ID e.g "standard", "hardened" etc.


numdivs=4

function init() {
showDiv(0);
}
function showDiv( which ) {
for(i=0;i<numdivs;i++) {
eval("document.getElementById('div"+i+"').style.visibility='hidden'");
}
eval("document.getElementById('div"+which+"').style.visibility='visible'");
}

function hideDiv() {
for(i=0;i<numdivs;i++){
eval("document.getElementById('div"+i+"').style.visibility='hidden'");
}
}

Ok I've made some progress on this problem. The problem comes from ONE of my directions
document.getElementById('newCommentProfilePicture$postCount').style.display = '';
When I leave this out, all other lines work. The code fails to execute any line after this one. I still have no explanation for why that is, but I'll keep you posted. To poster above, try seeing if one of your lines is causing the problem!

style.display = '' is not correct syntax. Should be:-
style.display = "block";
style.display = "none";

"Two Spanish flags for the crowd to see, one of them Japanese." - Football commentator