get Element by id :

**zipbox** · 19/08/2020, 11h17

Bonjour à tous,

Pour découvrir la fonction « get Element by id »

J’ai imaginé un générateur de « mot de passe » aléatoire

Cela fonctionne, mais . . .

Je me demande si j’ai bien utiliser comme il faut, et peut-on optimiser cela,

Merci pour vos remarques . . .

Code html :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<html>
<head> <title>clic 123</title>
 
<style type="text/css">
table { border:  none; border-collapse: collapse; }
tr { font-family: Calibri; font-size: 10pt; color: #000000; text-align: center; font-weight: normal;}
</style>
 
<script type="text/JavaScript"> 
<!--
 
i1 = "123456789";
i2 = "abcdefghijkmnprstuvwxyz";
i3 = "ABCDEFGHIJKMNPRSTUVWXYZ";
 
function f(i) { 
 
// alert(i.id.substr(1,2)+" "+i.id.substr(3,1));
 
if (i.id.substr(3,1) == 1) document.getElementById("i"+i.id.substr(1,2)).textContent = i1.substr(Math.random() * 9, 1);
if (i.id.substr(3,1) == 2) document.getElementById("i"+i.id.substr(1,2)).textContent = i2.substr(Math.random() * 23, 1);
if (i.id.substr(3,1) == 3) document.getElementById("i"+i.id.substr(1,2)).textContent = i3.substr(Math.random() * 23, 1);
}
 
function init() {
 
for (i=1; i<13; i++) {
  n1 = "i"+(i<10?"0":"")+i; n2 = Math.floor(Math.random()*3)+1; // alert (n1 + " " + n2);
  document.getElementById(n1+String(n2)).checked = true;
  if (n2==1) document.getElementById(n1).textContent = i1.substr(Math.random() * 9, 1);
  if (n2==2) document.getElementById(n1).textContent = i2.substr(Math.random() * 23, 1);
  if (n2==3) document.getElementById(n1).textContent = i3.substr(Math.random() * 23, 1);
}
 
}
 
//-->
</script>
 
</head>
<body>
 
<table border="0" height="100%" width="100%">
<tbody>
<tr>
<td>
<div align="center">
 
<table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
 
<tr>
<td id="i01">-</td> <td id="i02">-</td> <td id="i03">-</td>
<td id="i04">-</td> <td id="i05">-</td> <td id="i06">-</td>
<td id="i07">-</td> <td id="i08">-</td> <td id="i09">-</td>
<td id="i10">-</td> <td id="i11">-</td> <td id="i12">-</td>
</tr>
 
<td colspan="12" rowspan="1">&nbsp;</td>
 
<tr>
<td><input type="radio" name="i01" id="i011" onclick="f(this)"></td>
<td><input type="radio" name="i02" id="i021" onclick="f(this)"></td>
<td><input type="radio" name="i03" id="i031" onclick="f(this)"></td>
<td><input type="radio" name="i04" id="i041" onclick="f(this)"></td>
<td><input type="radio" name="i05" id="i051" onclick="f(this)"></td>
<td><input type="radio" name="i06" id="i061" onclick="f(this)"></td>
<td><input type="radio" name="i07" id="i071" onclick="f(this)"></td>
<td><input type="radio" name="i08" id="i081" onclick="f(this)"></td>
<td><input type="radio" name="i09" id="i091" onclick="f(this)"></td>
<td><input type="radio" name="i10" id="i101" onclick="f(this)"></td>
<td><input type="radio" name="i11" id="i111" onclick="f(this)"></td>
<td><input type="radio" name="i12" id="i121" onclick="f(this)"></td>
</tr>
 
<tr>
<td><input type="radio" name="i01" id="i012" onclick="f(this)"></td>
<td><input type="radio" name="i02" id="i022" onclick="f(this)"></td>
<td><input type="radio" name="i03" id="i032" onclick="f(this)"></td>
<td><input type="radio" name="i04" id="i042" onclick="f(this)"></td>
<td><input type="radio" name="i05" id="i052" onclick="f(this)"></td>
<td><input type="radio" name="i06" id="i062" onclick="f(this)"></td>
<td><input type="radio" name="i07" id="i072" onclick="f(this)"></td>
<td><input type="radio" name="i08" id="i082" onclick="f(this)"></td>
<td><input type="radio" name="i09" id="i092" onclick="f(this)"></td>
<td><input type="radio" name="i10" id="i102" onclick="f(this)"></td>
<td><input type="radio" name="i11" id="i112" onclick="f(this)"></td>
<td><input type="radio" name="i12" id="i122" onclick="f(this)"></td>
</tr>
 
<tr>
<td><input type="radio" name="i01" id="i013" onclick="f(this)"></td>
<td><input type="radio" name="i02" id="i023" onclick="f(this)"></td>
<td><input type="radio" name="i03" id="i033" onclick="f(this)"></td>
<td><input type="radio" name="i04" id="i043" onclick="f(this)"></td>
<td><input type="radio" name="i05" id="i053" onclick="f(this)"></td>
<td><input type="radio" name="i06" id="i063" onclick="f(this)"></td>
<td><input type="radio" name="i07" id="i073" onclick="f(this)"></td>
<td><input type="radio" name="i08" id="i083" onclick="f(this)"></td>
<td><input type="radio" name="i09" id="i093" onclick="f(this)"></td>
<td><input type="radio" name="i10" id="i103" onclick="f(this)"></td>
<td><input type="radio" name="i11" id="i113" onclick="f(this)"></td>
<td><input type="radio" name="i12" id="i123" onclick="f(this)"></td>
</tr>
 
</tbody>
</table>
 
<br>
 
<button onclick="init()"> >>> </button>
 
</div>
</td>
</tr>
</tbody>
</table>
 
</body>
</html>

**javatwister** · 19/08/2020, 12h05

Pas de souci particulier!
Par contre, ton code est tout de même extrêmement répétitif;
Et sans jouer avec les id, tout cela serait beaucoup plus fluide...

**javatwister** · 19/08/2020, 15h44

Je me permets de te proposer 2 ou 3 changements:

Code html :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
<style>
table { border:  none; border-collapse: collapse; }
tr { font-family: Calibri; font-size: 10pt; color: #000000; text-align: center; font-weight: normal;}
</style>
 
</head>
<body>
 
<table id="t">
	<tr>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
 
	<tr>
		<td><input type="radio" name="r0"></td>
		<td><input type="radio" name="r1"></td>
		<td><input type="radio" name="r2"></td>
		<td><input type="radio" name="r3"></td>
		<td><input type="radio" name="r4"></td>
		<td><input type="radio" name="r5"></td>
		<td><input type="radio" name="r6"></td>
		<td><input type="radio" name="r7"></td>
		<td><input type="radio" name="r8"></td>
		<td><input type="radio" name="r9"></td>
		<td><input type="radio" name="r10"></td>
		<td><input type="radio" name="r11"></td>
	</tr>
	<tr>
		<td><input type="radio" name="r0"></td>
		<td><input type="radio" name="r1"></td>
		<td><input type="radio" name="r2"></td>
		<td><input type="radio" name="r3"></td>
		<td><input type="radio" name="r4"></td>
		<td><input type="radio" name="r5"></td>
		<td><input type="radio" name="r6"></td>
		<td><input type="radio" name="r7"></td>
		<td><input type="radio" name="r8"></td>
		<td><input type="radio" name="r9"></td>
		<td><input type="radio" name="r10"></td>
		<td><input type="radio" name="r11"></td>
	</tr>
	<tr>
		<td><input type="radio" name="r0"></td>
		<td><input type="radio" name="r1"></td>
		<td><input type="radio" name="r2"></td>
		<td><input type="radio" name="r3"></td>
		<td><input type="radio" name="r4"></td>
		<td><input type="radio" name="r5"></td>
		<td><input type="radio" name="r6"></td>
		<td><input type="radio" name="r7"></td>
		<td><input type="radio" name="r8"></td>
		<td><input type="radio" name="r9"></td>
		<td><input type="radio" name="r10"></td>
		<td><input type="radio" name="r11"></td>
	</tr>
</table>
 
<div>
	<button id="change"> >>> </button>
</div>
 
<script> 
 
window.addEventListener("DOMContentLoaded",()=>{// au chargement de la page
        const t=["123456789","abcdefghijkmnprstuvwxyz","ABCDEFGHIJKMNPRSTUVWXYZ"],// tableau des valeurs possibles
        tr=document.querySelectorAll("#t tr");// collection des "tr"
        go();
        
        function go(){// fonction de choix aléatoire   
                Array.from(tr[0].cells).forEach((v,i)=>{// pour chaque cellule de la première ligne
                        let cod=parseInt(Math.random()*t.length);// choix aléatoire d'un type de caractère
                        let wh=parseInt(Math.random()*t[cod].length);// choix d'un caractère
                        v.textContent=t[cod][wh];// la cellule affiche ce caractère
                        tr[cod+1].cells[i].childNodes[0].checked=true;// le bouton est activé
                })
        }
        
        document.querySelectorAll("#t td").forEach(v=>{// pour chaque cellule
                v.addEventListener("click",()=>{// quand on clique dessus
                        let par=t[v.parentNode.rowIndex-1];// on recherche à quelle ligne elle appartient
                        tr[0].cells[v.cellIndex].textContent=par[parseInt(Math.random()*par.length)];// on change le caractère
                        v.childNodes[0].checked=true;// le bouton est activé
                })
        })
        
        document.querySelector("#change").addEventListener("click",()=> go())// on refait tout le code
})      
</script>
</body>
</html>

Pour un html plus simple, je te conseille de générer le tableau et ses boutons en js.

**zipbox** · 19/08/2020, 21h34

Grandement merci . . .
Je vais étudier cela . . .
Me faut comprendre ce code . . .

get Element by id :

JavaScript

Vue hybride

Discussions similaires

Partager

Partager