onClick Handler undefined
Wat gaat hier fout?
<HTML>
<HEAD>
<TITLE>onClick Handler</TITLE>
<script type="text/javascript">
function Waarde(){
var myBalk = document.getElementsByName('vraag12');
if(myBalk.value != "")
alert("You entered: " + myBalk.value)
else
alert("Would you please enter some text?")
}
</script>
</HEAD>
<BODY onLoad="initValue()" onUnload="exitMsg()">
<input type="radio" name="vraag12" id="v1200" value="0" class="radio" onclick='Waarde()'/>
<input type="radio" name="vraag12" id="v1201" value="1" class="radio" onclick='Waarde()'/>
<input type="radio" name="vraag12" id="v1202" value="2" class="radio" onclick='Waarde()'/>
<input type="radio" name="vraag12" id="v1203" value="3" class="radio" onclick='Waarde()'/>
<input type="radio" name="vraag12" id="v1204" value="4" class="radio" onclick='Waarde()'/>
<input type="radio" name="vraag12" id="v1205" value="5" class="radio" onclick='Waarde()'/>
<input type="radio" name="vraag12" id="v1206" value="6" class="radio" onclick='Waarde()'/>
<input type="radio" name="vraag12" id="v1207" value="7" class="radio" onclick='Waarde()'/>
<input type="radio" name="vraag12" id="v1208" value="8" class="radio" onclick='Waarde()'/>
<input type="radio" name="vraag12" id="v1209" value="9" class="radio" onclick='Waarde()'/>
<input type="radio" name="vraag12" id="v1210" value="10" class="radio" onclick='Waarde()'/>
</BODY>
</HTML>
Het is overigens uiteindelijk de bedoeling dat ik een plaatje laat zien met de breedte van de aangeklikte waarde.
Dus als er op de vierde button word gedrukt wordt het (denk ik)
$balk=10*myBalk.value
<img src="_img/balk.jpg" width="">
getElementsByName geeft niet 1 object terug, maar alle elementen met <input name="vraag12">
Je vertelt nergens dat je de functie wil uitvoeren met het element waarvan sprake.
Probeer zo eens:
Code (php)
1
2
3
2
3
...
<input type="radio" name="vraag12" id="v1210" value="10" class="radio" onclick="Waarde(this)"/>
...
<input type="radio" name="vraag12" id="v1210" value="10" class="radio" onclick="Waarde(this)"/>
...
Dus overal met onclick="Waarde(this)"
en dan
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function Waarde(myBalk ) {
if(myBalk.value != "") {
alert("You entered: " + myBalk.value);
}
else {
alert("Would you please enter some text?");
}
}
if(myBalk.value != "") {
alert("You entered: " + myBalk.value);
}
else {
alert("Would you please enter some text?");
}
}
Door die "this" in de markup geef je het element mee aan de functie
Gewijzigd op 12/09/2012 11:39:36 door Kris Peeters
Nu alleen nog uitzoeken hoe ik dat plaatje ga weergeven...
Code (php)
1
<img src="_img/balk.jpg" id="mijn_plaatje">
Code (php)
1
2
3
4
5
6
2
3
4
5
6
function Waarde(myBalk ) {
if(myBalk.value != "") {
var img = document.getElementById('mijn_plaatje');
img.style.width = myBalk.value + 'px';
}
}
if(myBalk.value != "") {
var img = document.getElementById('mijn_plaatje');
img.style.width = myBalk.value + 'px';
}
}
Gewijzigd op 12/09/2012 12:38:16 door Kris Peeters
Toevoeging op 12/09/2012 12:44:55:
Oja, en nog iets. Wat als ik meerdere balkjes wil.
Dit is nu mijn code:
<HTML>
<HEAD>
<TITLE>onClick Handler</TITLE>
<script type="text/javascript">
function Waarde(myBalk) {
if(myBalk.value != "") {
var img = document.getElementById('mijn_plaatje');
img.style.width = 15*myBalk.value + 'px';
}
}
</script>
</HEAD>
<BODY>
<p>
<input type="radio" name="vraag12" id="v1200" value="0" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag12" id="v1201" value="1" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag12" id="v1202" value="2" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag12" id="v1203" value="3" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag12" id="v1204" value="4" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag12" id="v1205" value="5" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag12" id="v1206" value="6" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag12" id="v1207" value="7" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag12" id="v1208" value="8" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag12" id="v1209" value="9" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag12" id="v1210" value="10" class="radio" onclick='Waarde(this)'/>
<img src="eigenbalk.png" id="mijn_plaatje" height="15">
</p>
<p>
<input type="radio" name="vraag13" id="v1300" value="0" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag13" id="v1301" value="1" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag13" id="v1302" value="2" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag13" id="v1303" value="3" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag13" id="v1304" value="4" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag13" id="v1305" value="5" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag13" id="v1306" value="6" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag13" id="v1307" value="7" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag13" id="v1308" value="8" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag13" id="v1309" value="9" class="radio" onclick='Waarde(this)'/>
<input type="radio" name="vraag13" id="v1310" value="10" class="radio" onclick='Waarde(this)'/>
<img src="eigenbalk.png" id="mijn_plaatje" height="15">
</p>
</BODY>
</HTML>
Je kan in de radio button al duidelijk maken naar welke <img> moet gekeken worden.
bv.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<input type="radio" name="vraag12" id="v1209" value="9" class="radio" onclick="Waarde(this, 'plaatje1')"/>
<input type="radio" name="vraag12" id="v1210" value="10" class="radio" onclick="Waarde(this, 'plaatje1')"/>
<img src="eigenbalk.png" id="plaatje1" class="balk">
...
<input type="radio" name="vraag13" id="v1310" value="10" class="radio" onclick="Waarde(this, 'plaatje2')"/>
<input type="radio" name="vraag13" id="v1309" value="9" class="radio" onclick="Waarde(this, 'plaatje2')"/>
<img src="eigenbalk.png" id="plaatje2" class="balk">
<input type="radio" name="vraag12" id="v1210" value="10" class="radio" onclick="Waarde(this, 'plaatje1')"/>
<img src="eigenbalk.png" id="plaatje1" class="balk">
...
<input type="radio" name="vraag13" id="v1310" value="10" class="radio" onclick="Waarde(this, 'plaatje2')"/>
<input type="radio" name="vraag13" id="v1309" value="9" class="radio" onclick="Waarde(this, 'plaatje2')"/>
<img src="eigenbalk.png" id="plaatje2" class="balk">
en dan
Code (php)
1
2
3
4
5
6
2
3
4
5
6
function Waarde(myBalk, myImage ) {
if(myBalk.value != "") {
var img = document.getElementById(myImage);
img.style.width = myBalk.value + 'px';
}
}
if(myBalk.value != "") {
var img = document.getElementById(myImage);
img.style.width = myBalk.value + 'px';
}
}
De begintoestand van de plaatjes moet je in css regelen
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<style>
img.balk {
height: 15px;
width: 0;
}
</style>
img.balk {
height: 15px;
width: 0;
}
</style>
Gewijzigd op 12/09/2012 13:28:59 door Kris Peeters
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
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
<HTML>
<HEAD>
<TITLE>onClick Handler</TITLE>
<script type="text/javascript">
function Waarde(myBalk, myImg ) {
if(myBalk.value != "") {
var img = document.getElementById(myImg);
img.style.width = 15*myBalk.value + 'px';
}
}
</script>
<style type="text/css">
img.balk {
height: 10px;
width: 0;
}
</style>
</HEAD>
<BODY>
<p>
<input type="radio" name="vraag12" id="v1200" value="0" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1201" value="1" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1202" value="2" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1203" value="3" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1204" value="4" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1205" value="5" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1206" value="6" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1207" value="7" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1208" value="8" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1209" value="9" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1210" value="10" class="radio" onclick='Waarde(this, 'img12')'/>
<img src="eigenbalk.png" id="img12" class="balk">
</p>
<p>
<input type="radio" name="vraag13" id="v1300" value="0" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1301" value="1" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1302" value="2" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1303" value="3" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1304" value="4" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1305" value="5" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1306" value="6" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1307" value="7" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1308" value="8" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1309" value="9" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1310" value="10" class="radio" onclick='Waarde(this, 'img13')'/>
<img src="eigenbalk.png" id="img13" class="balk">
</p>
</BODY>
</HTML>
<HEAD>
<TITLE>onClick Handler</TITLE>
<script type="text/javascript">
function Waarde(myBalk, myImg ) {
if(myBalk.value != "") {
var img = document.getElementById(myImg);
img.style.width = 15*myBalk.value + 'px';
}
}
</script>
<style type="text/css">
img.balk {
height: 10px;
width: 0;
}
</style>
</HEAD>
<BODY>
<p>
<input type="radio" name="vraag12" id="v1200" value="0" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1201" value="1" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1202" value="2" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1203" value="3" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1204" value="4" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1205" value="5" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1206" value="6" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1207" value="7" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1208" value="8" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1209" value="9" class="radio" onclick='Waarde(this, 'img12')'/>
<input type="radio" name="vraag12" id="v1210" value="10" class="radio" onclick='Waarde(this, 'img12')'/>
<img src="eigenbalk.png" id="img12" class="balk">
</p>
<p>
<input type="radio" name="vraag13" id="v1300" value="0" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1301" value="1" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1302" value="2" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1303" value="3" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1304" value="4" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1305" value="5" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1306" value="6" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1307" value="7" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1308" value="8" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1309" value="9" class="radio" onclick='Waarde(this, 'img13')'/>
<input type="radio" name="vraag13" id="v1310" value="10" class="radio" onclick='Waarde(this, 'img13')'/>
<img src="eigenbalk.png" id="img13" class="balk">
</p>
</BODY>
</HTML>
in plaats van
onclick='Waarde(this, 'img12')'
Anders geeft dat een syntax error
Top! Thanx voor je hulp!
:-)) Helemaal blij!