div onclick
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
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
<html>
<head>
<title>Nieuwe pagina 2</title>
<style type="text/css">
.test {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
height: 100px;
margin: 0px;
padding: 4px;
}
</style>
</head>
<body>
<div id="test" class="test" onclick="document.getElementById('test').background-color = '#fffff';" style="background-color:#000000;"></div>
</body>
</html>
<head>
<title>Nieuwe pagina 2</title>
<style type="text/css">
.test {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
height: 100px;
margin: 0px;
padding: 4px;
}
</style>
</head>
<body>
<div id="test" class="test" onclick="document.getElementById('test').background-color = '#fffff';" style="background-color:#000000;"></div>
</body>
</html>
var test = document.getElementById('test');
test.onClick() = function(){
test.style.backgroundColor='#fff'
}
</script>
tussen de head tags zetten en uw inline js en css weghalen.
heb het niet nagekeken maar denk dat dit zo ongeveer moet werken
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
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
<html>
<head>
<title>Nieuwe pagina 2</title>
<style type="text/css">
.test {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
height: 100px;
margin: 0px;
padding: 4px;
background: #000000;
}
</style>
<script type="text/javascript">
var test = document.getElementById('test');
test.onClick() = function(){
test.style.backgroundColor='#fff'
}
</script>
</head>
<body>
<div id="test" class="test"></div>
</body>
</html>
<head>
<title>Nieuwe pagina 2</title>
<style type="text/css">
.test {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
height: 100px;
margin: 0px;
padding: 4px;
background: #000000;
}
</style>
<script type="text/javascript">
var test = document.getElementById('test');
test.onClick() = function(){
test.style.backgroundColor='#fff'
}
</script>
</head>
<body>
<div id="test" class="test"></div>
</body>
</html>
wat zegt de error console? (in chrome [ctrl]+[shift]+[j])
voor je je script laat uitvoeren moet je natuurlijk wel window.onload = function() zetten.
zo moet het werken heb het net nagekeken
<script type="text/javascript">
window.onload = function(){ //begin script anders werkt het niet
//vervolg script
var test = document.getElementById('test');
test.onclick() = function(){
test.style.backgroundColor='#fff'
}
}
</script>
en in je CSS de class veranderen naar id
Gewijzigd op 16/03/2012 12:53:41 door wesley barbery
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
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
<html>
<head>
<title>Nieuwe pagina 2</title>
<style type="text/css">
#test {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
height: 100px;
margin: 0px;
padding: 4px;
background: #000000;
}
</style>
<script type="text/javascript">
window.onload = function(){ //begin script anders werkt het niet
//vervolg script
var test = document.getElementById('test');
test.onclick() = function(){
test.style.backgroundColor='#fff'
}
}
</script>
</head>
<body>
<div id="test" class="test"></div>
</body>
</html>
<head>
<title>Nieuwe pagina 2</title>
<style type="text/css">
#test {
border: 1px dashed #FF0000;
color: #000000;
text-align: center;
width: 100px;
height: 100px;
margin: 0px;
padding: 4px;
background: #000000;
}
</style>
<script type="text/javascript">
window.onload = function(){ //begin script anders werkt het niet
//vervolg script
var test = document.getElementById('test');
test.onclick() = function(){
test.style.backgroundColor='#fff'
}
}
</script>
</head>
<body>
<div id="test" class="test"></div>
</body>
</html>
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
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
<html>
<head>
<title>Nieuwe pagina 2</title>
<style type="text/css">
#test {
border: 1px dashed #FF0000;
color: #000;
text-align: center;
width: 100px;
height: 100px;
margin: 0px;
padding: 4px;
background: #000000;
}
</style>
<script type="text/javascript">
function turn()
{
var div = document.getElementById('test');
div.style.background = "FFF";
}
</script>
</head>
<body>
<div id="test" onclick="javascript:turn('test')" ></div>
</body>
</html>
<head>
<title>Nieuwe pagina 2</title>
<style type="text/css">
#test {
border: 1px dashed #FF0000;
color: #000;
text-align: center;
width: 100px;
height: 100px;
margin: 0px;
padding: 4px;
background: #000000;
}
</style>
<script type="text/javascript">
function turn()
{
var div = document.getElementById('test');
div.style.background = "FFF";
}
</script>
</head>
<body>
<div id="test" onclick="javascript:turn('test')" ></div>
</body>
</html>
@Gerhard leuke toevoeging :) Had daar even niet aan gedacht. Maar zo maak je hem wel compleet.
Wat gebeurt hier je maakt een variable van de div?
Omdat style.backgroundColor geen tag is volgens mij. Dit moet
style.background zijn, maar dit kan ook aan mij liggen.
Toevoeging op 16/03/2012 15:30:28:
Volgens mij ga je hier de fout in.
Omdat style.backgroundColor geen tag is volgens mij. Dit moet
style.background zijn, maar dit kan ook aan mij liggen.
met JS kan je bij heel veel regels zien wat het doet het is zo opgebouwd dat het een soort van uitleg geeft.
@bas backgroundcolor is gewoon een specifiekere aanspreking van background met background kan je alle background elementen (CSS) aanmaken met backgroundColor enkel de kleur
ik dacht ook nog dat er al even geen javascript meer in u html tags mocht staan kwestie van alles duidelijk te scheiden van elkaar, als hij het juist aan het leren is kan hij het beter van in het begin juist doen