Actie op Button's zetten

Door Andries op 20-05-2020 14:04 gewijzigd op 20-05-2020 14:08

1.947 views

Goedemiddag,

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


<!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>

Vriendelijke groet,
Andries

- Ariën -

20-05-2020 14:13

Je maakt hier al de fout waarbij je het onderscheid in PHP en JavaScript mist.
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.

Adoptive Solution

20-05-2020 14:41

Kwam dit tegen.
JavaScript toegevoegd.
Zelf uitbreiden.

https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button

<!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>

Jan te Pas

20-05-2020 18:47

Je hebt bij een button een paar situaties. Hover, asl je eroverheen gaat, activated en meer. Een voorbeeld kun je hier vinden:
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.

Reageren

Inloggen om te reageren