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 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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.

    Code:
    	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';
    	}
    PHP Code:
    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>"


  • #2
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ok I've made some progress on this problem. The problem comes from ONE of my directions
    Code:
    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!

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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'");	
    	}
    }

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by soneen View Post
    Ok I've made some progress on this problem. The problem comes from ONE of my directions
    Code:
    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


  •  

    Posting Permissions

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