Créer l'interaction avec une case
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 8O
Mes codes :
HTML :
Code:
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:
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:
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;
}
} |
