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
    Dec 2011
    Posts
    186
    Thanks
    0
    Thanked 1 Time in 1 Post

    Javascript changes inline css value for only an instant

    I wrote the code below to practice getting divs to appear and disappear. It has 2 divs. The first div contains two links. One link is to hide the second div, the other link is to make it reappear.

    I have styles in the head, and 1 inline for each div. Javascript is supposed to change the inline style display value from block to none on the click.

    The problem is, when I change the value in blue from block to none manually on the server, the change happens successfully and stays in place until I change it back manually.

    But when I click on the Hide Schedule link, that means I'm telling javascript to change the inline valueblock to none (highlighted in red in the javascript function), to make the second div disappear.

    onClick, it disappears for a fraction of a second, then reappears just as it was before the I clicked the link.

    I haven't clicked the other link, because the div that is supposed to vanish does so for only a split second.

    It looks like javascript isn't working right. I use firefox. Does anyone know what is going on?

    Thanks


    Code:
    <!DOCTYPE html>
    
    <xhtml>
    <head>
    <title>Practice Calendar</title>
    
    <style type="text/css">
    
    .practicecalendar
    {
    float: left
    margin: 0;
    width: 18em;
    background: #eee;
    text-align: center;
    }
    
    .practiceschedule
    {
    float: right;
    margin: 0;
    width: 18em;
    background: #99E6FF;
    text-align: center;
    }
    
    </style>
    
    <script type="text/javascript">
    <!--
    function showSchedule(){
    document.getElementById("practiceschedule").style.display = 'block';
    }
    
    function hideSchedule(){
    document.getElementById("practiceschedule").style.display = 'none';
    }
    //-->
    </script>
    </head>
    
    <body>
    
    <div id='practicecalendar' class='practicecalendar' style='
    display: block;
    '>
    
    <p><a href='' onClick='showSchedule()'>Show Schedule</a></p>
    <p><a href='' onClick='hideSchedule()'>Hide Schedule</a></p>
    </div>
    
    <div id='practiceschedule' class='practiceschedule' style='
    display: block;
    '>
    <p><a href='' onClick='showCalendar()'>Schedule</a></p>
    </div>
    
    </body>
    </xhtml>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    your page is reloading with each onclick. try adding return false to the onclicks:
    Code:
    <p><a href='' onClick='showSchedule(); return false'>Show Schedule</a></p>

  • #3
    Regular Coder
    Join Date
    Dec 2011
    Posts
    186
    Thanks
    0
    Thanked 1 Time in 1 Post
    It worked. Thank you.


    Is the href=' ' causing it to reload?

    What exactly does href=' ' and href='#' mean?


    Thanks again.


  •  

    Posting Permissions

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