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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Location
    Toronto, ON
    Posts
    102
    Thanks
    12
    Thanked 1 Time in 1 Post

    Modifying css style of an ID with javascript

    Hi guys, For some reason the following code is not working. Anybody see any issues?

    By default the style of #pricea in my stylesheet is visibility="hidden";

    Code:
    <script type="text/javascript">
    	function arrow(boxName){
    			document.getElementById(boxName).style.visibility = "visible";
    	}
    </script>
    
    
    
    <?php
    if($_REQUEST['sort']=="price" && $_REQUEST['order']=="ASC"){
    ?>
    <script type="text/javascript">
    	arrow('pricea');
    </script>
    <?php	
    }?>
    Last edited by inchecksolution; 10-21-2011 at 10:23 PM.

  • #2
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by inchecksolution View Post
    Hi guys, For some reason the following code is not working. Anybody see any issues?

    By default the style of #pricea in my stylesheet is visibility="hidden";

    Code:
    <script type="text/javascript">
        function arrow(boxName){
                document.getElementById(boxName).style.visibility = "visible";
        }
    </script>
    
    
    
    <?php
    if($_REQUEST['sort']=="price" && $_REQUEST['order']=="ASC"){
    ?>
    <script type="text/javascript">
        arrow('pricea');
    </script>
    <?php    
    }?>
    I am not seeing anything obvious. Maybe try adding some temporary alert() functions for debugging... like this:


    Code:
    <script type="text/javascript">
        function arrow(boxName){
                alert('Param is ' + boxName);
                document.getElementById(boxName).style.visibility = "visible";
                alert(document.getElementById(boxName));
        }
    </script>
    
    <?php
    if($_REQUEST['sort']=="price" && $_REQUEST['order']=="ASC"){
    ?>
    <script type="text/javascript">
        arrow('pricea');
    </script>
    <?php    
    }?>
    The first alert should pop up "Param is pricea"

    The second one should show something like "[HTMLDivElement]" (or whatever "pricea" is).

    Another thing to try is maybe the "pricea" element doesn't exist at the time you call the "arrow" function. To test this easily, try to run it after a delay, like this:

    Code:
    <script type="text/javascript">
    setTimeout(function() {
        arrow('pricea');
    }, 3000);
     </script>
    This will wait 3 seconds before running the code, giving everything else ample time to load.

    All of this should point you in the right direction..... good luck.
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    Toronto, ON
    Posts
    102
    Thanks
    12
    Thanked 1 Time in 1 Post
    That was it! I called the arrow() function before I actually created the element. ugh...thanks for the help. What a noob error haha.


  •  

    Posting Permissions

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