verander class div
Ik heb het op deze manier geprobeerd:
Code (php)
1
2
3
4
5
2
3
4
5
function color()
{
for (x = 0; x <5; x++)
document.getElementById(test[x]).className = "white";
}
{
for (x = 0; x <5; x++)
document.getElementById(test[x]).className = "white";
}
Maar dat werkt niet, het problem zit hem denk ik in “getElementById(test[x])” hoe kan ik dit wel werkend krijgen???
Gewijzigd op 03/04/2012 17:35:10 door Koh do
Code (php)
1
2
3
4
5
6
2
3
4
5
6
function color()
{
for( var x = 0; x < 5; x++ ) {
document.getElementById(test + x).className = 'some-class';
}
}
{
for( var x = 0; x < 5; x++ ) {
document.getElementById(test + x).className = 'some-class';
}
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Nieuwe pagina 2</title>
<style type="text/css">
.black {
width:20px;
height:20px;
padding:4px;
border:1px dashed #f00;
color:#000;
text-align:center;
cursor:pointer;
background-color:#000;
}
.white {
width:20px;
height:20px;
padding:4px;
border:1px dashed #f00;
color:#000;
text-align:center;
cursor:pointer;
background-color:#fff;
}
</style>
<script type="text/javascript">
<!--
function white()
{
for (var i = 0; i < 5; i++)
document.getElementById(test + i).className = "white";
}
function black()
{
for (var i = 0; i < 5; i++)
document.getElementById(test + i).className = "black";
}
End -->
</script>
</head>
<body>
<input type="button" name="black" value="black" onClick="black()">
<input type="button" name="white" value="white" onClick="white()">
<br>
<form name="myform" action="checkboxes.asp" method="post">
<div id="test" class="black"></div>
</br>
<div id="test1" class="black"></div>
</br>
<div id="test2" class="black"></div>
</br>
<div id="test3" class="black"></div>
</form>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Nieuwe pagina 2</title>
<style type="text/css">
.black {
width:20px;
height:20px;
padding:4px;
border:1px dashed #f00;
color:#000;
text-align:center;
cursor:pointer;
background-color:#000;
}
.white {
width:20px;
height:20px;
padding:4px;
border:1px dashed #f00;
color:#000;
text-align:center;
cursor:pointer;
background-color:#fff;
}
</style>
<script type="text/javascript">
<!--
function white()
{
for (var i = 0; i < 5; i++)
document.getElementById(test + i).className = "white";
}
function black()
{
for (var i = 0; i < 5; i++)
document.getElementById(test + i).className = "black";
}
End -->
</script>
</head>
<body>
<input type="button" name="black" value="black" onClick="black()">
<input type="button" name="white" value="white" onClick="white()">
<br>
<form name="myform" action="checkboxes.asp" method="post">
<div id="test" class="black"></div>
</br>
<div id="test1" class="black"></div>
</br>
<div id="test2" class="black"></div>
</br>
<div id="test3" class="black"></div>
</form>
</body>
</html>
Wil je het toch met Javascript aanpakken gebruik dan deze code.
Js :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript" type="text/javascript">
function changeCssClass(objDivID) {
if (document.getElementById(objDivID).className == 'redText') {
document.getElementById(objDivID).className = 'blueText';
}
else {
document.getElementById(objDivID).className = 'redText';
}
}
</script>
function changeCssClass(objDivID) {
if (document.getElementById(objDivID).className == 'redText') {
document.getElementById(objDivID).className = 'blueText';
}
else {
document.getElementById(objDivID).className = 'redText';
}
}
</script>
- Meta tags op regel 7 - 9 zijn onnodig en moet je deleten
- comment tags in script tags komen uit 1998 niet uit 2012, daarin zijn ze niet meer nodig
- input elementen (zoals op regel 58 en 59) mogen niet buiten een form element voorkomen. Je moet van deze input elementen gewoon button elementen maken waarbij dan de value, name en type niet meer nodig zijn.
- onclick is gewoon zonder hoofdletters en dus niet camelCase, wat jij nu hebt
- </br> is geen tag, gebruik <br>
- test in JS is bij jou nu een variabele geen string ( 'test' )
- plaats {} om de code van een for loop heen, dat voorkomt problemen. Dus for( ... ) { ... }
- elke keer alle elementen uit de DOM doorzoeken kost wel heel veel tijd, haal in de window.onload functie 1 keer de benodigde elementen op en plaats die in een variabele (array/nodeList) waarnaar je vervolgens in de callback functie black/white door deze array loopt en de waardes zet
- je hebt nu onnodig veel dubbele stijlen. Stijl bijv. alle divjes eerst met de stijlen die je dubbel hebt en hou de classen black/white alleen om de background-color te veranderen.
Als je dit alles aanpast krijg je dit: http://jsfiddle.net/jutvA/embedded/result/
Bas, omdat je niet bij elke regel JS moet gaan schreeuwen om jQuery. Waarom wil iedereen nou zelfs voor dit soort simpele dingen 24kb aan JS inladen????? Wordt het nou echt zo dat niemand over 1 jaar meer weet hoe je raw JS schrijft? Wordt het standaard antwoord op JS vragen nou altijd 'gebruik jquery'???
Tevens vind ik de TS (topic starter) zijn code bijna beter dan die van jou, zo bestaat er geen language attribuut, doet het iets totaal anders dan die van de TS en is het nog langzamer omdat er minimaal 2 keer (per click) nutteloos naar een element in de DOM wordt gezocht.
Gewijzigd op 03/04/2012 19:45:44 door Wouter J
Wouter J op 03/04/2012 19:39:11:
Bas, omdat je niet bij elke regel JS moet gaan schreeuwen om jQuery. Waarom wil iedereen nou zelfs voor dit soort simpele dingen 24kb aan JS inladen????? Wordt het nou echt zo dat niemand over 1 jaar meer weet hoe je raw JS schrijft? Wordt het standaard antwoord op JS vragen nou altijd 'gebruik jquery'???
Helemaal mee eens.
Ozzie PHP op 03/04/2012 19:47:55:
Helemaal mee eens.
Wouter J op 03/04/2012 19:39:11:
Bas, omdat je niet bij elke regel JS moet gaan schreeuwen om jQuery. Waarom wil iedereen nou zelfs voor dit soort simpele dingen 24kb aan JS inladen????? Wordt het nou echt zo dat niemand over 1 jaar meer weet hoe je raw JS schrijft? Wordt het standaard antwoord op JS vragen nou altijd 'gebruik jquery'???
Helemaal mee eens.
Oke dat is duidelijk!
Nu ik het zelf zo lees ben ik het eigenlijk ook met Wouter eens :)
Ik zou zeggen vang dit af of hernoem je eerste div naar test0!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
function color()
{
for (x = 0; x <5; x++)
{
if (x==0)
{
document.getElementById('test').className = "white";
}
else
{
document.getElementById('test'+x).className = "white";
}
}
}
{
for (x = 0; x <5; x++)
{
if (x==0)
{
document.getElementById('test').className = "white";
}
else
{
document.getElementById('test'+x).className = "white";
}
}
}
Gewijzigd op 04/04/2012 15:54:46 door Hank Noseman
getElementById('test'+x)