Créer l'interaction avec une case

Invité · 16/01/2010, 18h05

Bonjour, alors voila j'en suis la avec mon TP, je doit crée un mot de passe améliorer comme les banques.

J'ai généré mon tableau en javascript et affecter à certaines des cases une valeurs entre 1 et 9 et à chaque rafraichissement, la position change.

Mais je n'arrive pas a faire en sorte que quand je clique sur la case d'une valeur, celle ci rentre dans le formulaire "mot de passe".

Je sais pas si je suis très clair

Mes codes :

HTML :

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
<!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>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<link href="style.css" rel="stylesheet" type="text/css" />
	<meta name="Author" content="Yaël FAZY" />
	<meta name="content-language" content="fr" />
	<meta name="Keywords" content="" />
	<title>Index</title>
</head>
 
<body>
<form>
	<h1>Connexion</h1>
	<div id="user">
		<p>Login : <input id="login" type="text" value="" />
			Code Secret : <input id="motdepasse" type="password" value="" /></p>
 
		<div id="genereTab"></div>
 
		<p><input id="corriger" type="button" value="Corriger" />
			<input id="confirmer" type="button" value="Confirmer" />
			<input id="annuler" type="button" value="Annuler" /></p>
	</div>
</form>
<noscript>
	<div id="noScript">Attention ! Le JavaScript n'est pas activer, vous pourriez rencontrer des problèmes. 
		<a href="https://www.livepages.fr/browserhelp/firefoxJavaScript.html">Comment activer le JavaScript?</a></div>
</noscript>
<script type="text/javascript" src="script.js"></script> 
</body>
</html>

CSS :

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
body {
	background-color:white;
	background-attachment:scroll;
	margin:auto;
	padding:auto;
	width:800px;
}
 
#tabmdp {
	text-align:center;
	margin-left:auto;
	margin-right:auto;	
}
 
#tabmdp td {
	background-color:white;
	height:40px;
	width:40px;
}
 
#user {
	border-style:dashed;
	border-width:thin;
	border-color:gray;
	margin-top:100px;
	margin-right:50px;
	margin-left:50px;
	padding-top:-50px;
	text-align:center;
	background-color:gray;
}

JavaScript :

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
var utilisateur = new User("",""); // Création d'un Objet User
 
					///// EVENEMENTS ////////// APPEL DE FONCTIONS ////////// EVENEMENTS /////
					///// EVENEMENTS ////////// APPEL DE FONCTIONS ////////// EVENEMENTS /////
document.getElementById("annuler").onclick = reset;
document.getElementById("corriger").onclick = corriger;
document.getElementById("confirmer").onclick = confirmer;
document.getElementById("genereTab").innerHTML = genererTableau("tabmdp");
genRandomTableau("tabmdp");
 
					///// OBJET : UTILISATEUR ////////// OBJET : UTILISATEUR ////////// OBJET : UTILISATEUR /////
					///// OBJET : UTILISATEUR ////////// OBJET : UTILISATEUR ////////// OBJET : UTILISATEUR /////
function User(log,mdp) {
	this.login=log;
	this.motdepasse=mdp;
 
	if(typeof User.initialised=="undefined") {
		User.prototype.setlogin=function(log) {
			this.login=log;
			};
		User.prototype.getlogin=function() {
			return this.login;
			};
		User.prototype.setmotdepasse=function(mdp) {
			this.motdepasse=mdp;
			};
		User.prototype.getmotdepasse=function() {
			return this.motdepasse;
			};
		User.initialised=true;
	}
}
 
					///// BOUTON ANNULER ////////// BOUTON ANNULER ////////// BOUTON ANNULER /////
					///// BOUTON ANNULER ////////// BOUTON ANNULER ////////// BOUTON ANNULER /////
function reset() {
    document.getElementById("login").value="";
	document.getElementById("motdepasse").value="";
	utilisateur.setlogin("");
	utilisateur.setmotdepasse("");
}
 
					///// BOUTON CORRIGER ////////// BOUTON CORRIGER ////////// BOUTON CORRIGER /////
					///// BOUTON CORRIGER ////////// BOUTON CORRIGER ////////// BOUTON CORRIGER /////
function corriger() {
	document.getElementById("motdepasse").value="";
	utilisateur.setmotdepasse("");
}
 
					///// BOUTON COMFIRMER ////////// BOUTON COMFIRMER ////////// BOUTON COMFIRMER /////
					///// BOUTON COMFIRMER ////////// BOUTON COMFIRMER ////////// BOUTON COMFIRMER /////
function confirmer() {
 	utilisateur.setlogin(document.getElementById("login").value);
 	utilisateur.setmotdepasse(document.getElementById("motdepasse").value);
	alert("Login : "+utilisateur.getlogin()+"\nMDP : "+utilisateur.getmotdepasse());
}
 
					///// GENERE TABLEAU ////////// GENERE TABLEAU ////////// GENERE TABLEAU /////
					///// GENERE TABLEAU ////////// GENERE TABLEAU ////////// GENERE TABLEAU /////
function genererTableau(idtab) {
	var chaine="<table id='" + idtab + "'>";
	for (i=0; i<5; i++) { // genere 5 lignes
		chaine+="<tr id='" + idtab + "l" + i + "'>";
 
		for (j=0; j<5; j++) { // genere 5 colonnes
			chaine+="<td id='" + idtab + "c" + i + j + "'>" + "</td>";
		}
 
		chaine+="</tr>";
	}
	chaine+="</table>";
 
return chaine;	
}
 
					///// RANDOM TABLEAU ////////// RANDOM TABLEAU ////////// RANDOM TABLEAU /////
					///// RANDOM TABLEAU ////////// RANDOM TABLEAU ////////// RANDOM TABLEAU /////
function genRandomTableau(idtabrand) {
	for(value=0; value<10; value++) {
		do {
			i= (Math.floor((5)*Math.random()));
			j= (Math.floor((5)*Math.random()));
		} while (document.getElementById(idtabrand + "c" + i + j).innerHTML!="");
 
		document.getElementById(idtabrand + "c" + i + j).innerHTML=value; 
	}
}

**micetf** · 16/01/2010, 19h37

Bonjour,
Voici peut-être une piste :
Lors de la génération du tableau aléatoire (genRandomTableau),
après avoir affecté une valeur à une cellule

Code existant :

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

document.getElementById(idtabrand + "c" + i + j).innerHTML=value;

j'appellerais une fonction lorsqu'un événement onclick se produit sur l'une des cellules du tableau.
Cette fonction étant chargée de rajouter le chiffre cliqué au mot de passe.

Code que je rajouterais :

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

document.getElementById(idtabrand + "c" + i + j).onclick=function() {document.getElementById("motdepasse").value+=this.innerHTML;}

Fred

Invité · 17/01/2010, 17h38

Parfait ! merci beaucoup, sa marche parfaitement.. j'ai plus qu'a comprendre comment sa marche.

Créer l'interaction avec une case

JavaScript

Discussions similaires

Partager

Partager