Actie op Button's zetten
Ik ben bezig om een php scripje te maken met 8 buttons.
(in het voorbeeld eventjes 2)
Nu wil ik dat als ik een button indruk deze een andere kleur krijgt.
Nu kan ik dit wel voor elkaar krijgen met elke button apart "uit te schrijven" maar ik zoek een oplossing om dit dynamisch te doen.
Anders gezegd: als ik 1 getal aanpas kan ik ipv 2 button's 20 button's tonen.
Maar ik krijg het niet voor elkaar om het ID van de button mee te geven naar de functie.
Wat doe ik verkeerd?
button.php
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
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
<!DOCTYPE html>
<html>
<body>
<?php
$val_array = array(0,0);
$i =1;
echo ("Click the button to turn on/off the light.<br>");
for ($i = 1; $i < 3; $i++) {
//if off
if ($val_array[$i][0] == 0 ) {
echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' onclick='changeImageX();'/>");
}
//if on
if ($val_array[$i][0] == 1 ) {
echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".jpg' onclick='changeImageX();'/>");
}
}
?>
<script>
function changeImageX() {
alert ("this is button $i");
}
</script>
</body>
</html>
<html>
<body>
<?php
$val_array = array(0,0);
$i =1;
echo ("Click the button to turn on/off the light.<br>");
for ($i = 1; $i < 3; $i++) {
//if off
if ($val_array[$i][0] == 0 ) {
echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' onclick='changeImageX();'/>");
}
//if on
if ($val_array[$i][0] == 1 ) {
echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".jpg' onclick='changeImageX();'/>");
}
}
?>
<script>
function changeImageX() {
alert ("this is button $i");
}
</script>
</body>
</html>
Vriendelijke groet,
Andries
Edit:
Ik heb code-tags geplaatst. Gelieve dit in het vervolg zelf toe te voegen aan je bericht. Quote tags zijn bedoeld voor het citeren van tekst.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken.
Gewijzigd op 20/05/2020 14:08:49 door - Ariën -
PHP wordt door de server uitgevoerd, en Javascript door de browser. Dus je $i welke uit PHP komt is al van de juiste waarde voorzien vóórdat je Javascript geladen is.
Je kan de ID bijvoorbeeld meegeven als apart argument van je changeImageX() functie.
JavaScript toegevoegd.
Zelf uitbreiden.
https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button
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
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
<!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
<script>
function veranderkleur( id, kleur) {
knop = document.getElementById(id);
knop.style.backgroundColor = kleur;
}
</script>
</head>
<body>
<p>Styled input buttons.</p>
<input id="1" type="button" value="Button" onclick="veranderkleur(this.id,'navy');">
<input id="2" type="reset" value="Reset" onclick="veranderkleur(this.id,'yellow');">
<input id="3" type="submit" value="Submit" onclick="veranderkleur(this.id,'black');">
</body>
</html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
<script>
function veranderkleur( id, kleur) {
knop = document.getElementById(id);
knop.style.backgroundColor = kleur;
}
</script>
</head>
<body>
<p>Styled input buttons.</p>
<input id="1" type="button" value="Button" onclick="veranderkleur(this.id,'navy');">
<input id="2" type="reset" value="Reset" onclick="veranderkleur(this.id,'yellow');">
<input id="3" type="submit" value="Submit" onclick="veranderkleur(this.id,'black');">
</body>
</html>
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_active_element
Je kunt met javascript bij een button onclick een functie activeren die de rest van de bauttons laat omkleuren. Dit kun je doen met de volgende opdrachten:
bijvoorbeeld een ander plaatje in de button zetten
document.getElementById('uit_knop').src = "button-uit.png";
of button niet meer tonen
document.getElementById('aan_knop').style.display = "none";
Dit kan gemakkelijk voor een span, div en individuele zaken gedaan worden.