...

View Full Version : Resolved Need to set element visibility using Switch/Case



legattis
11-19-2010, 06:39 PM
So, I have a list of items that need to have a new preset list item appear based on what day it is. I have the date script working (to test, change the first case to some random date and change the third case to todays date - 10192010 - It will fire that document.write). What I need the cases to do though, is set the visibility of certain list items.

This is just an example, there will be around 20 list items in the final project. As you can see in the first two cases, I've tried a couple different routes to no avail. Any help would be fantastic.

The Code (class references are irrelevant to this example, they belong to the final project):


<html>
<head>

<script type="text/javascript" language="JavaScript">
/*
Count up from any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/


function getToday(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900

var todaym=today.getMonth()
var todayd=today.getDate()
var simpledate=todaym+""+todayd+""+todayy


var firstItem=document.getElementById("listOne");
var secondItem=document.getElementById("listTwo");
var thirdItem=document.getElementById("listThree");


switch(simpledate){
case "10192010":
firstItem.style.visibility="visible";
secondItem.style.visibility="hidden";
thirdItem.style.visibility="hidden";
break;
case "10202010":
document.getElementById("listOne").style.visibility="visible";
document.getElementById("listTwo").style.visibility="visible";
document.getElementById("listThree").style.visibility="hidden";
break;
case '10212010':
document.write("This code works...why can't I change an elements style within this case block also?")
break;
default:
document.write("Something is wrong")
}
}
//enter the count up date using the format year/month/day
getToday(2010,07,26)

</script>

</head>
<body>
<div id="theList">
<ul class="rounded">
<li id="listOne" style="display:block;" class="arrow"><a href="#kliwComic-MvPDualBoot"><font size="1px">11/17/10 - </font>MvP: Dual Boot</a></li>
<li id="listTwo" style="display:block;" class="arrow"><a href="#kliwComic-MvPTouchScreen"><font size="1px">11/18/10 - </font>MvP: Touch Screen</a></li>
<li id="listThree" style="display:block;" class="arrow"><a href="#kliwComic-MvPVista"><font size="1px">11/19/10 - </font>MvP: Vista</a></li>
</ul>
</div>

</body>
</html>

I'm a bit of a hack at this. Any input is greatly appreciated. Thanks again.

Philip M
11-19-2010, 07:03 PM
a) Your script is running before the elements exist. Either place the script at the end right before the </body> tag or better use

<body onload = "getToday()">

The function should be function getToday(){ // you want today's date, you are not passing some other date to the function.


b) You are using both

style="display:block;"
and
document.getElementById("listOne").style.visibility="visible";

Stick with one or the other.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

legattis
11-19-2010, 07:09 PM
Excellent sir, thank you. That's all it was - removing the dispaly:block and firing the function in the right place. Many thanks!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum