<td> van kleur doen veranderen

Status
Niet open voor verdere reacties.
T

thomas lemmens

Gebruiker
Lid geworden
8 mei 2009
Berichten
36
hey

ik heb een tabel met een aantal links die allemaal een functie oproepen.
het javascriptje maakt een div zichtbaar en andere div's onzichtbaar.
nu zou ik graag de cel waarin de link in staat van kleur doen veranderen.

ik heb al van alles geprobeerd maar het wilt maar niet lukken. kan iemand helpen?

[JS]function geefMaand(nummer){
var kleurActiv='#6E7F7F';
var kleur='#526363';
var maand = new Array();
maand[1]='september';
maand[2]='oktober';
maand[3]='november';
maand[4]='december';
maand[5]='januari';
maand[6]='februari';
maand[7]='maart';
maand[8]='april';
var hoofd = new Array();
hoofd[1]='sep';
hoofd[2]='okt';
hoofd[3]='nov';
hoofd[4]='dec';
hoofd[5]='jan';
hoofd[6]='feb';
hoofd[7]='maa';
hoofd[8]='apr';


for(var counter=1;counter<=8;counter++){

if(counter==nummer)
document.getElementById(maand[counter]).style.visibility = 'visible';

else
document.getElementById(maand[counter]).style.visibility= 'hidden';
}

}[/JS]

het is dus de bedoeling dat ik de cel met id sep, okt enz. van kleur laat veranderen wanneer er op de link gedrukt word.
en terug de originele kleur krijgt als er op andere link gedrukt wordt.

HTML: 
<table id="maanden">
				<tr>
					<td id="sep" bgcolor="#526363">
						<a  href="javascript:geefMaand('1','sep');">Sep</a>
					</td>	
					<td>&nbsp;</td>					
					<td id="okt" bgcolor="#526363">
						<a  href="javascript:geefMaand('2','okt');">Okt</a>						
					</td>
...
 
Het veranderen van de achtergrondkleur kan met [js]document.getElementById(id).bgColor = "#kleurcode"[/js]

Je geeft twee argumenten mee aan "geefMaand", dus moet je de functie-header veranderen in [js]function geefMaand(nummer, id)[/js] Overigens lijkt het er op dat je als id ook [js]hoofd['nummer'][/js] kunt gebruiken, maar dan moet je het tweede argument in de aanroepen weghalen.
Het aanpassen van de kleur kan je toevoegen aan je bestaande for-lus:
[js]for(var counter=1;counter<=8;counter++){

if(counter==nummer){
document.getElementById(maand[counter]).style.visibility = 'visible';
document.getElementById(hoofd[counter]).bgColor = "#nieuwe kleur";
}
else{
document.getElementById(maand[counter]).style.visibility= 'hidden';
document.getElementById(hoofd[counter]).bgColor = "#oude kleur";
}
}[/js]
Dit is in het geval dat je het tweede argument in de aanroep weghaalt.
 
Laatst bewerkt:
ik heb beide mogelijkheden al geprobeerd maar het wil maar niet werken,
zodra ik de regels voor het veranderen van kleur er bij zet, werken de linken ook niet meer.:confused:
 
Ik heb even een simpele pagina gemaakt en bij mij werkt dit:
HTML: 
<html>
<head>
<script>
function geefMaand(nummer){
            var kleurActiv='#6E7F7F';
            var kleur='#526363';
            var maand = new Array();
                maand[1]='september';
                maand[2]='oktober';
                maand[3]='november';
                maand[4]='december';
                maand[5]='januari';
                maand[6]='februari';
                maand[7]='maart';
                maand[8]='april';
            var hoofd = new Array();
                hoofd[1]='sep';
                hoofd[2]='okt';
                hoofd[3]='nov';
                hoofd[4]='dec';
                hoofd[5]='jan';
                hoofd[6]='feb';
                hoofd[7]='maa';
                hoofd[8]='apr';

for(var counter=1;counter<=8;counter++){

                    if(counter==nummer){
                        document.getElementById(maand[counter]).style.visibility = 'visible';
                        document.getElementById(hoofd[counter]).bgColor = kleurActiv;
                    }
                    else{
                         document.getElementById(maand[counter]).style.visibility= 'hidden';
                         document.getElementById(hoofd[counter]).bgColor = kleur;
                     }
                }
}
</script>
</head>
<body>
<table id="maanden">
                <tr>
                    <td id="sep" bgcolor="#526363">
                        <a  href="javascript:geefMaand('1');">Sep</a>
                    </td>
                    <td>&nbsp;</td>
                    <td id="okt" bgcolor="#526363">
                        <a  href="javascript:geefMaand('2');">Okt</a>
                    </td>
                 </tr>
                 <tr>
                    <td id="september">
                        september
                    </td>
                    <td>&nbsp;</td>
                    <td id="oktober">
                        oktober
                    </td>
                 </tr>
</table>
</body>
</html>
 
het ziet er het zelfde uit als bij mij.

kan het kwaad dat ik de id's die van kleur moeten veranderen ook in css gebruik?
 
Dat zou geen verschil moeten uitmaken. Heb je al geprobeerd om de volledige html die ik eerder gepost heb in een nieuwe pagina te zetten en te kijken of dat werkt?
 
Supersnail zei:
Dat zou geen verschil moeten uitmaken. Heb je al geprobeerd om de volledige html die ik eerder gepost heb in een nieuwe pagina te zetten en te kijken of dat werkt?
Klik om te vergroten...

ja heb ik gedaan en zo werkt het zoals je zei. ik ga vanuit deze html verder werken zodat ik uiteindelijk mijn pagina terg krijg hopelijk blijft het werken.

hartelijk bedankt alvast
 
Kan je hier anders nog de volledige html van de pagina (waar het niet werkt) kunnen posten? Misschien dat we kunnen vinden wat er misgaat, dan hoef je het niet allemaal opnieuw te maken.
 
dit is de html

HTML: 
<html>
	<head>
		<title>Agenda nl</title>
		<link href="../css/agenda.css" rel="stylesheet" type="text/css">
		<script type="text/javascript">
		
			function huidigeMaand(){	
				var maandarray = new Array('januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december');
				var tijd_datum = new Date();
				var maand = tijd_datum.getMonth();			
				document.getElementById(maandarray[maand]).style.visibility = 'visible';
			}			
				
			function geefMaand(nummer){
			var coli=eval("id"+i);	
			var maand = new Array();
				maand[1]='september';
				maand[2]='oktober';
				maand[3]='november';
				maand[4]='december';
				maand[5]='januari';
				maand[6]='februari';
				maand[7]='maart';
				maand[8]='april';
			var hoofd = new Array();
                hoofd[1]='sep';
                hoofd[2]='okt';
                hoofd[3]='nov';
                hoofd[4]='dec';
                hoofd[5]='jan';
                hoofd[6]='feb';
                hoofd[7]='maa';
                hoofd[8]='apr';
			
				for(var counter=1;counter<=8;counter++){						
					document.getElementById(maand[counter]).style.visibility= 'hidden';	
					document.getElementById(hoofd[counter]).bgColor = "#526363";
					
				}				
				document.getElementById(maand[nummer]).style.visibility = 'visible';
				document.getElementById(hoofd[counter]).bgColor = "#6E7F7F";
				
			}
			
		</script>
	</head>
	<body onLoad="huidigeMaand()">
		<h6>>>Agenda</h6>
		<div id="container">
			<table id="maanden">
				<tr>
					<td id="sep" bgcolor="#526363">
						<a  href="javascript:geefMaand('1');">Sep</a>
					</td>	
					<td>&nbsp;</td>					
					<td id="okt" bgcolor="#526363">
						<a  href="javascript:geefMaand('2');">Okt</a>						
					</td>
					<td>&nbsp;</td>
					<td id="nov" bgcolor="#526363">
						<a  href="javascript:geefMaand('3');">Nov</a>
					</td>	
					<td>&nbsp;</td>
					<td id="dec" bgcolor="#526363">
						<a  href="javascript:geefMaand('4');">Dec</a>
					</td>	
					<td>&nbsp;</td>
					<td id="jan" bgcolor="#526363">
						<a  href="javascript:geefMaand('5');">Jan</a>
					</td>
					<td>&nbsp;</td>					
					<td id="feb" bgcolor="#526363">
						<a  href="javascript:geefMaand('6');">Feb</a>
					</td>	
					<td>&nbsp;</td>
					<td id="maa" bgcolor="#526363">
						<a  href="javascript:geefMaand('7');">Maa</a>
					</td>	
					<td>&nbsp;</td>
					<td id="apr" bgcolor="#526363">
						<a  href="javascript:geefMaand('8');">Apr</a>
					</td>				
					
				</tr>
			</table>		
			<div id="september">
				<span style="font-weight:bold;">September</span>
				<table id="dagen">
					<tr bgcolor=#6E7F7F>
						<td ></td>
						<td ></td>
						<td><td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td></td>
						<td></td>
						<td></td>
					</tr>					
				</table>
			</div>
			<div id="oktober">
				<span style="font-weight:bold;">Oktober</span>
				<table id="dagen">
					<tr bgcolor=#6E7F7F>
						<td >19/10/2009</td>
						<td >20u30-22u30</td>
						<td>Training<td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>21/10/2009</td>
						<td>20u30-22u30</td>
						<td>Jeugdtraining + Initiatie</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>26/10/2009</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>26/10/2009</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>					
				</table>
			</div>
			<div id="november">
				<span style="font-weight:bold;">November</span>
				<table id="dagen">
					<tr bgcolor=#CCCCCC>
						<td>2/11/2009</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>4/11/2009</td>
						<td>20u30-22u30</td>
						<td>Jeugdtraining + Initiatie</td> 
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>9/11/2009</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>11/11/2009</td>
						<td>20u30-22u30</td>
						<td>Jeugdtraining + Initiatie </td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>16/11/2009</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>18/11/2009</td>
						<td>20u30-22u30</td>
						<td>Jeugdtraining + Initiatie </td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>23/11/2009</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>25/11/2009</td>
						<td>20u30-22u30</td>
						<td>Jeugdtraining + Initiatie </td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>30/11/2009</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
				</table>
			</div>
			<div id="december">
				<span style="font-weight:bold;">December</span>
				<table id="dagen">
					<tr bgcolor=#CCCCCC>
						<td>07/12/2009</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>02/12/2009</td>
						<td>20u30-22u30</td>
						<td>Jeugdtraining + Initiatie </td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>09/12/2009</td>
						<td>20u30-22u30</td>
						<td>Jeugdtraining + Initiatie</td>
					</tr> 
					<tr bgcolor=#6E7F7F>
						<td>14/12/2009</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>16/12/2009</td>
						<td>20u30-22u30</td>
						<td>Jeugdtraining + Initiatie</td> 
					</tr>
					
				</table>
			</div>
			<div id="januari">
				<span style="font-weight:bold;">januari</span>
				<table id="dagen">
					<tr bgcolor=#CCCCCC>
						<td>04/01/2009</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>06/01/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie</td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>11/01/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>13/01/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie</td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>18/01/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>20/01/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie</td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>25/01/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>27/01/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie</td>
					</tr> 					
				</table>
			</div>
			<div id="februari">
				<span style="font-weight:bold;">Februari</span>
				<table id="dagen">
					<tr bgcolor=#CCCCCC>
						<td>02/02/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>04/02/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie</td>
					</tr> 
					<tr bgcolor=#CCCCCC>
						<td>09/02/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>11/02/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie</td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>16/02/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr> 
					<tr bgcolor=#6E7F7F>
						<td>18/02/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie</td>
					</tr> 					
				</table>
			</div>
			<div id="maart">
				<span style="font-weight:bold;">Maart</span>
				<table id="dagen">
					<tr bgcolor=#CCCCCC>
						<td>01/03/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>03/03/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie </td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>08/03/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>10/03/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie </td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>15/03/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>17/03/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie</td>
					</tr> 
					<tr bgcolor=#CCCCCC>
						<td>22/03/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>24/03/2010</td>
						<td>20u30-22u30</td>
						<td>Initiatie</td>
					</tr>
					<tr bgcolor=#CCCCCC>
						<td>29/03/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>					
				</table>
			</div>
			<div id="april">
				<span style="font-weight:bold;">April</span>
				<table id="dagen">
					<tr bgcolor=#CCCCCC>
						<td>19/04/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
					<tr bgcolor=#6E7F7F>
						<td>26/04/2010</td>
						<td>20u30-22u30</td>
						<td>Training</td>
					</tr>
				</table>
			</div>
		</div>
		
		
	
	
	
	</body>
</html>

dit is de css

Code: 
body{
	background-color: #CCCCCC;
}

h6{
	color: white;
	font-size:13;
}

span{
	color: white;
	font-size:15;
	
}
A:visited ,
A:active ,
A:hover, 
A:link {
	text-decoration: none;
	color:white;
}


#maanden{
	width: 400px;
	border:0;
	padding:0;
	border-spacing:0;
	margin-left: auto; 
	margin-right: auto;
}


#sep,
#okt,
#nov,
#dec,
#jan,
#feb,
#maa,
#apr{
	font-size:15;	
	color:white;
	
}

#container{
	width: 400px;
	margin: auto;
}

#april,
#maart,
#februari,
#januari,
#december,
#november,
#oktober,
#september{
	width: 400px;
	border:0;
	padding:0;
	border-spacing:0;
	margin: 0 auto; 
	background-color: #6E7F7F;
	position:absolute;
	visibility:hidden;
}

#dagen{
	border-spacing:0;
	padding:0;	
	margin-left: auto; 
	margin-right: auto;	
	width:400px;
	border:solid;
	border-width:1;
	font-size: 14;
}
 
Ik heb de pagina eens geladen in firefox en gekeken met de error console. Wat is het nut van deze regel [js]var coli=eval("id"+i);[/js] De foutmelding was namelijk dat hij 'i' niet kent. Na het uitbecommentarieren van deze regel werkt het bij mij (al zie ik nog wel een melding in de error console die ik niet helemaal snap ("Error: document.getElementById(hoofd[counter]) is null")).

[edit]Ik snap hem nu wel. Verander regel 41 van [js]document.getElementById(hoofd[counter]).bgColor = "#6E7F7F";[/js] in [js]document.getElementById(hoofd[nummer]).bgColor = "#6E7F7F";[/js][/edit]
 
Laatst bewerkt:
ok ik heb het werkende gekregen.
dat van die coli was nog een probeersel dat ik was vergeten weg te doen.

counter is gedeclareerd in de for lus dus is bijgevolg enkel gekend in de for lus
daarmee dat je die foutmelding kreeg
het moet het volgende zijn

document.getElementById(hoofd[nummer])

hartelijk bedankt!!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan