[JS] Zelfde functie met andere variabelen?
Ben sinds kort me een beetje aan het verdiepen in Javascript en heb mijn eerste scriptjes in elkaar geprutst. Nu wou ik vragen of dit zo een net script is of dat het ook anders kan.
Onderstaand script wordt toegepast op een pagina met 10 verschillende items, welke elk bij het aanklikken het zelfde moeten doen; maar met de voor de verschillende items andere variabelen. Hoe dit aan te geven?
Het script wat ik nu heb:
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<head>
<script type="text/javascript">
<?php include 'connect.php';
$qry = "SELECT * FROM tablename ORDER BY time DESC LIMIT 0, 10";
$db->execute_sql($qry,$result,$error_msg);
if($error_msg <> "")
{
echo $error_msg;
}
else
{
while($row = mysql_fetch_object($result))
{
?>
//
// HIER DE SHOW FUNCTIE VOOR EEN ITEM
//
function show<?php echo $row->id ?>()
{
a=document.getElementById('item<?php echo $row->id ?>').getElementsByTagName('iframe')[0];
a.setAttribute('src', '<?php echo $row->link ?>');
a.setAttribute('width', '100%');
a.setAttribute('height', '960');
x=document.getElementById('item<?php echo $row->id ?>');
g=document.createElement('a');
g.setAttribute('href', '#<?php echo $row->naam ?>');
g.setAttribute('id', '<?php echo $row->id ?>');
g.onclick = hide<?php echo $row->id ?>;
g.appendChild(document.createTextNode('Verberg item'));
x.appendChild(g,x.lastChild);
b=document.getElementById('<?php echo $row->id ?>').getElementsByTagName('a')[0].firstChild;
b.nodeValue = 'Verberg item';
c=document.getElementById('<?php echo $row->id ?>').getElementsByTagName('a')[0];
c.onclick = hide<?php echo $row->id ?>;
}
//
// HIER DE HIDE FUNCTIE VOOR EEN ITEM -->
//
function hide<?php echo $row->id ?>()
{
d=document.getElementById('item<?php echo $row->id ?>').getElementsByTagName('iframe')[0];
d.setAttribute('src', '');
d.setAttribute('width', '0');
d.setAttribute('height', '0');
e=document.getElementById('<?php echo $row->id ?>').getElementsByTagName('a')[0].firstChild;
e.nodeValue = 'Toon item';
f=document.getElementById('<?php echo $row->id ?>').getElementsByTagName('a')[0];
f.onclick = show<?php echo $row->id ?>;
u=document.getElementById('item<?php echo $row->id ?>').getElementsByTagName('a')[0].firstChild;
u.parentNode.removeChild(u);
}
<?php }
} ?>
</script>
</head>
<body>
<table>
<?php
$qry = "SELECT * FROM tablename ORDER BY time DESC LIMIT 0, 10";
$db->execute_sql($qry,$result,$error_msg);
if($error_msg <> "")
{
echo $error_msg;
}
else
{
while($row = mysql_fetch_object($result))
{
?>
<tr>
<td class="inhoud">
<h1 id="<?php echo $row->naam ?>">ITEMNAAM</h1>
<p style="text-align: justify">ITEMTEKST</p>
<p id="<?php echo $row->id ?>"><a href="#<?php echo $row->naam ?>" onclick="show<?php echo $row->id ?>()">Bekijk item</a></p>
</td>
<td class="plaatje">
<img src="<?php echo $row->picture ?>" alt="Foto van <?php echo $row->naam ?>">
</td>
</tr>
<tr>
<td colspan="100%" id="item<?php echo $row->id ?>">
<iframe id='itemiframe' name='itemiframe' src='' scrolling='no' marginwidth='0' marginheight='0' frameborder='0' vspace='0' hspace='0' width='0' height='0'></iframe>
</td>
</tr>
<?php
}
}
?>
</table>
</body>
</html>
<script type="text/javascript">
<?php include 'connect.php';
$qry = "SELECT * FROM tablename ORDER BY time DESC LIMIT 0, 10";
$db->execute_sql($qry,$result,$error_msg);
if($error_msg <> "")
{
echo $error_msg;
}
else
{
while($row = mysql_fetch_object($result))
{
?>
//
// HIER DE SHOW FUNCTIE VOOR EEN ITEM
//
function show<?php echo $row->id ?>()
{
a=document.getElementById('item<?php echo $row->id ?>').getElementsByTagName('iframe')[0];
a.setAttribute('src', '<?php echo $row->link ?>');
a.setAttribute('width', '100%');
a.setAttribute('height', '960');
x=document.getElementById('item<?php echo $row->id ?>');
g=document.createElement('a');
g.setAttribute('href', '#<?php echo $row->naam ?>');
g.setAttribute('id', '<?php echo $row->id ?>');
g.onclick = hide<?php echo $row->id ?>;
g.appendChild(document.createTextNode('Verberg item'));
x.appendChild(g,x.lastChild);
b=document.getElementById('<?php echo $row->id ?>').getElementsByTagName('a')[0].firstChild;
b.nodeValue = 'Verberg item';
c=document.getElementById('<?php echo $row->id ?>').getElementsByTagName('a')[0];
c.onclick = hide<?php echo $row->id ?>;
}
//
// HIER DE HIDE FUNCTIE VOOR EEN ITEM -->
//
function hide<?php echo $row->id ?>()
{
d=document.getElementById('item<?php echo $row->id ?>').getElementsByTagName('iframe')[0];
d.setAttribute('src', '');
d.setAttribute('width', '0');
d.setAttribute('height', '0');
e=document.getElementById('<?php echo $row->id ?>').getElementsByTagName('a')[0].firstChild;
e.nodeValue = 'Toon item';
f=document.getElementById('<?php echo $row->id ?>').getElementsByTagName('a')[0];
f.onclick = show<?php echo $row->id ?>;
u=document.getElementById('item<?php echo $row->id ?>').getElementsByTagName('a')[0].firstChild;
u.parentNode.removeChild(u);
}
<?php }
} ?>
</script>
</head>
<body>
<table>
<?php
$qry = "SELECT * FROM tablename ORDER BY time DESC LIMIT 0, 10";
$db->execute_sql($qry,$result,$error_msg);
if($error_msg <> "")
{
echo $error_msg;
}
else
{
while($row = mysql_fetch_object($result))
{
?>
<tr>
<td class="inhoud">
<h1 id="<?php echo $row->naam ?>">ITEMNAAM</h1>
<p style="text-align: justify">ITEMTEKST</p>
<p id="<?php echo $row->id ?>"><a href="#<?php echo $row->naam ?>" onclick="show<?php echo $row->id ?>()">Bekijk item</a></p>
</td>
<td class="plaatje">
<img src="<?php echo $row->picture ?>" alt="Foto van <?php echo $row->naam ?>">
</td>
</tr>
<tr>
<td colspan="100%" id="item<?php echo $row->id ?>">
<iframe id='itemiframe' name='itemiframe' src='' scrolling='no' marginwidth='0' marginheight='0' frameborder='0' vspace='0' hspace='0' width='0' height='0'></iframe>
</td>
</tr>
<?php
}
}
?>
</table>
</body>
</html>
Wat er nu dus gebeurd is dat PHP 20 javascript functies in de head neer zet, met verschillende functienamen. In de itemlijst in de body word dit ook per item neergezet (welke functie bij welk item hoort; en dus met de goede gegevens voor het betreffende item).
Is er een kortere manier om dit te doen? Wat er ook gebeurd is dat na 1x de functie te hebben gebruikt, de hide functie niet meer werkt.. (onderaan blijft de sluit regel staan); de 1e keer werkt het goed, maar na dus nog een 2e keer een item te openen en sluiten blijft deze regel staan. Weet iemand ook hoe dit kan?
Alvast heel erg bedankt voor jullie reactie's.
Gewijzigd op 01/01/1970 01:00:00 door Reforced
"u = null"
(dat is dus regel: u.parentNode.removeChild(u); die de eerste keer wel werkt)