...

View Full Version : Javascript changes inline css value for only an instant



milesdriven
01-05-2012, 07:42 PM
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




<!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>

xelawho
01-05-2012, 07:54 PM
your page is reloading with each onclick. try adding return false to the onclicks:

<p><a href='' onClick='showSchedule(); return false'>Show Schedule</a></p>

milesdriven
01-05-2012, 08:05 PM
It worked. Thank you.


Is the href=' ' causing it to reload?

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


Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum