js fails to toggle css display property when parameters used in js function

milesdriven

01-09-2012, 05:16 PM

I wrote a script that creates 2 absolutely positioned divs, in perfect alignment, one on top of the other. I want to use javascript to manipulate the display property of each div to show one div at a time by toggling each div's display property between none and block with an onClick event handler attached to the link.

This script works fine when the javascript function has no parameters, because the div id's are inserted directly into the getElementById function.

When I say it works, I mean the div with id=cal2 displays onload, then disappears when the Show Calendar link is clicked. The div that appears in its place has a link that does the reverse when clicked.

I want to create multiple pairs of overlapping divs that toggle their visibility, so I want to put parameters inside the functions that identify the specific pair of divs that need to be toggled per function call.

When I try to use variables/parameters in the functions to insert specific div id's into getElementById, it does not work.

PLEASE NOTE, the code below has div id's in green that don't have quotes of any kind. It still works in my firefox browser. I thought id's needed quotes, but it works without. I don't know why.

The code below works, but has no parameters in the functions:

<!DOCTYPE html>

<xhtml>
<head>
<title>Practice Calendar</title>

<style type="text/css">

.practicecalendar
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #B3FF99;
text-align: center;
}

.practiceschedule
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}

</style>

<script type="text/javascript">

</script>
</head>

<body>

<div id=cal2 class='practicecalendar' style='
display: block;
'>
<p>Calendar</p>
<p><a href='' onClick='showSchedule(); return false'>Show Schedule</a></p>
</div>

<div id=sch2 class='practiceschedule' style='
display: none;
'>
<p>Schedule</p>
<p><a href='' onClick='showCalendar(); return false'>Show Calendar</a></p>
</div>
</body>
</xhtml>

When I add the information in red to the same script above, I get the script below that does not work.

<!DOCTYPE html>

<xhtml>
<head>
<title>Practice Calendar</title>

<style type="text/css">

.practicecalendar
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #B3FF99;
text-align: center;
}

.practiceschedule
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}

</style>

<script type="text/javascript">

</script>
</head>

<body>

<div id=cal2 class='practicecalendar' style='
display: block;
'>
<p>Calendar</p>
<p><a href='' onClick='showSchedule('sch2','cal2'); return false'>Show Schedule</a></p>
</div>

<div id=sch2 class='practiceschedule' style='
display: none;
'>
<p>Schedule</p>
<p><a href='' onClick='showCalendar('cal2','sch2'); return false'>Show Calendar</a></p>
</div>
</body>
</xhtml>

When I remove the single quotes from the blue code, it does not work either.

<!DOCTYPE html>

<xhtml>
<head>
<title>Practice Calendar</title>

<style type="text/css">

.practicecalendar
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #B3FF99;
text-align: center;
}

.practiceschedule
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}

</style>

<script type="text/javascript">

</script>
</head>

<body>

<div id=cal2 class='practicecalendar' style='
display: block;
'>
<p>Calendar</p>
<p><a href='' onClick='showSchedule(sch2,cal2); return false'>Show Schedule</a></p>
</div>

<div id=sch2 class='practiceschedule' style='
display: none;
'>
<p>Schedule</p>
<p><a href='' onClick='showCalendar(cal2,sch2); return false'>Show Calendar</a></p>
</div>
</body>
</xhtml>

Thanks for reading all of this. Does anyone know what I'm missing?

venegal

01-09-2012, 06:44 PM

You have to be aware of the difference between literal strings and variables. Whenever you're not using quotes, you're accessing a variable; whenever you're using quotes, you're not.

Regarding your red code:
document.getElementById('sch') uses quotes, so 'sch' is a literal string. That means your code is looking for an element with the id sch, which doesn't exist, so this is wrong.

Regarding your blue code:
showSchedule(sch2,cal2) doesn't use quotes, so sch2 and cal2 are variables. Those variables don't exist, of course, because you never defined them, so this is wrong too.

What you really want to do is pass the literal strings 'sch2' and 'cal2' to the function showSchedule (showSchedule('sch2', 'cal2')). Your function definition looks like this function showSchedule(sch,cal), which means that whatever you passed to that function now sits in the variables sch and cal. So, no quotes: document.getElementById(sch).

milesdriven

01-09-2012, 08:40 PM

MOST RECENT UPDATE: It works. The code in blue below is the code I thought the onClick handler saw when I used single quotes inside the function call. The code in green is what the handler actually saw when I used single quotes inside the call.

When I used double quotes inside the function call, it actually saw the code in blue.

///////////////////////////////

Thank you very much for your very simple and elegant way of explaining the complexities of code.

I think I followed your instructions. I used quotes to define the div id's and the data in the function calls, because they are literals. I used no quotes in the function definitions because they are all variables.

It still doesn't work. I could easily have typos, or misunderstand something. Here are the changes I made:

<!DOCTYPE html>

<xhtml>
<head>
<title>Practice Calendar</title>

<style type="text/css">

.practicecalendar
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #B3FF99;
text-align: center;
}

.practiceschedule
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}

</style>

<script type="text/javascript">

</script>
</head>

<body>

<div id='cal2' class='practicecalendar' style='
display: block;
'>
<p>Calendar</p>
<p><a href='' onClick='showSchedule('sch2','cal2'); return false'>Show Schedule</a></p>
</div>

<div id='sch2' class='practiceschedule' style='
display: none;
'>
<p>Schedule</p>
<p><a href='' onClick='showCalendar('cal2','sch2'); return false'>Show Calendar</a></p>
</div>
</body>
</xhtml>

Any suggestions? Thank you.

venegal

01-09-2012, 09:12 PM

The literal/variable confusion is fixed now. What's still preventing your code from working is the fact that you're trying to nest strings without using different sets of quotes:

onClick='showSchedule('sch2','cal2'); return false'

'sch2' and 'cal2' are strings nested inside that larger string, delimited by the outer quotes, but what your code is actually seeing are three strings with a bunch of nonsensical stuff between them:

onClick='showSchedule('sch2','cal2'); return false'

If you nest strings, you either have to escape the inner quotes, which usually looks rather messy, or use different sets of quotes (single quotes and double quotes). Usually, double quotes are used for HTML attributes, and single quotes for Javascript strings, so your code should look like this:

onclick="showSchedule('sch2','cal2'); return false;"

By the way, <xhtml> is not a valid tag — that's supposed to be <html>. Also, since you're using function parameters now, there's absolutely no need for two different functions any more. Just use one function and change the function parameters accordingly.

milesdriven

01-09-2012, 09:44 PM

I understand now. Once again - thanks very much for the simple and very clear way you explained the complexities of writing code. You're a very good teacher.

Thanks for taking the time.