Utiliser fonction OnClick

**Badiha** · 03/11/2008, 00h46

Hello à tous, nouvelle sur le forum j'ai un petit exercice très simple à faire en javascript mais j'avoue ne pas réussir à créer une fonction onclick.

Je vous explique le principe, 4 onMouseOver pour faire apparaître quatre couleurs différentes puis un stop et un start. Le principe quand on appuie sur stop, le onMouseOver ne fonctionne plus et inversement avec le start.

A mon avis j'aurais pu regrouper mes 4 fonctions pour n'en faire qu'une mais j'avoue débuter et donc j'ai un peu de mal ^^

Le truc c'est que je n'arrive pas à créer un événement onClick pour les start et stop... Il faut créer une variable mais je ne vois absolument pas comme faire !

Je vous glisse le code en vous remerciant par avance.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Changer couleur de fond</title>
 
	<script type="text/javascript" language="javascript">
	<!--
 
	function blanc() {
 
 
		document.body.bgColor = "white";
 
	}
 
	//-->
	</script>
 
	<script type="text/javascript" language="javascript">
	<!--
 
	function bleu() {
 
 
 
		document.body.bgColor = "blue";
 
	}
 
	//-->
	</script>
 
	<script type="text/javascript" language="javascript">
	<!--
 
	function rouge() {
 
		document.body.bgColor = "red";
 
	}
 
	//-->
	</script>
 
		<script type="text/javascript" language="javascript">
	<!--
 
	function vert() {
 
		document.body.bgColor = "green";
 
	}
 
	//-->
	</script>
 
</head>
 
<body>
 
<p><a href="#" onMouseOver="blanc()">blanc</a> | <a href="#" onMouseOver="bleu()">bleu</a> | <a href="#" onMouseOver="rouge()">rouge</a> | <a href="#" onMouseOver="vert()">vert<br />
</a><br />
 
<a href="#">Stop</a> / <a href="#">Start</a>
 
 
 
</body>
</html>

**Auteur** · 03/11/2008, 19h04

bonjour,

dans un premier temps tu n'es pas obligée de créer des balises script pour chaque fonction. Une fois suffit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
	<script type="text/javascript" language="javascript">
	<!--
 
	function blanc() {
		document.body.bgColor = "white";
	}
 
	function bleu() {
		document.body.bgColor = "blue";
	}
 
	function rouge() {
		document.body.bgColor = "red";	
	}
 
	function vert() {
		document.body.bgColor = "green";
	}
	//-->
	</script>

ensuite pour créer un événement onclick, tu fais comme pour tes onmouseover. Par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#" onclick="stop()">Stop</a>

puis tu déclares ta fonction stop dans tes balises script (comme tu as fait pour tes fonctions de couleur).

même chose pour gérer le clic sur start

Envoyé par Badiha

Il faut créer une variable mais je ne vois absolument pas comme faire !

tu as compris ce qu'il fallait faire

Sache que tu peux déclarer en javascript des variables globales.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var varGlobale;

Ensuite (pour ne pas te donner un code tout fait car c'est un exercice) voici ce que tu peux faire :

déclarer ta variable globale (qui est un booléen) et l'initialiser à une valeur (true ou false d'après toi ?)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
1
2
 
var varGlobale = // on met true ou false ?;
```

dans chaque fonction où tu appliques la nouvelle couleur :

Code x :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
si varGlobale==true alors
document.body.style.backgroundColor = couleur
sinon
ne rien faire

Pour la fonction stop :

Code x :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
fonction stop()
{
    varGlobale = // on met true ou false ?
}

à toi de savoir si dans la fonction stop varGlobale doit être à true ou false

Pour la fonction start :

Code x :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
fonction start()
{
    varGlobale = // on met true ou false ?
}

à toi de savoir si dans la fonction start varGlobale doit être à true ou false

**Badiha** · 04/11/2008, 11h50

Merci pour ton aide, j'ai vu la réponse un peu tard, en fait j'ai réussi à faire l'exercice.

J'avais juste un souci pour définir ma première fonction (finalement j'ai réduit à une seule fonction au lieu de 4 les couleurs) et ça ne marchait pas à cause de deux ' ' que j'avais oublié

Vraiment c'est bête !

Utiliser fonction OnClick

JavaScript

Vue hybride

Discussions similaires

Partager

Partager