Bonjour !!

Dans le cadre d'un exercice qui consiste à trouver la méthode la plus pénible d'insérer un numéro de téléphone (il y en a plein sur le net est certains sont assez drôle ^^ ), Je voulais faire en sorte que la personne ne puisse utiliser que un clavier alphabétique pour rentrer des numéros !

Voici mon code :
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
<!doctype html>
<html lang="fr">
<head>
  	<meta charset="utf-8">
  	<title>telephone</title>
  	<link rel="stylesheet" href="tel.css">
</head>
<body>
    <h1>Votre numéro de téléphone</h1>
    <div>
        <p>Merci d'utiliser le clavier pour rentrer votre numéro de téléphone</p>
    </div>
    <div>
        <input id="insert" readonly></input>
        <button id="refresh">Reset</button>
    </div>
    <div id="clav"> 
    </div>
    <script src="tel.js"></script>
</body>

JS
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
//Aray des 26 lettres de l'alphabet en code ASCII
 
var keyboard = [
    { 'charCode':98, 'keyName':'a'},
    { 'charCode':99, 'keyName':'b'},
    { 'charCode':100, 'keyName':'c'},
    { 'charCode':101, 'keyName':'d'},
    { 'charCode':102, 'keyName':'e'},
    { 'charCode':103, 'keyName':'f'},
    { 'charCode':104, 'keyName':'g'},
    { 'charCode':105, 'keyName':'h'},
    { 'charCode':106, 'keyName':'i'},
    { 'charCode':107, 'keyName':'j'},
    { 'charCode':108, 'keyName':'k'},
    { 'charCode':109, 'keyName':'l'},
    { 'charCode':110, 'keyName':'m'},
    { 'charCode':111, 'keyName':'n'},
    { 'charCode':112, 'keyName':'o'},
    { 'charCode':113, 'keyName':'p'},
    { 'charCode':114, 'keyName':'q'},
    { 'charCode':115, 'keyName':'r'},
    { 'charCode':116, 'keyName':'s'},
    { 'charCode':117, 'keyName':'t'},
    { 'charCode':118, 'keyName':'u'},
    { 'charCode':119, 'keyName':'v'},
    { 'charCode':120, 'keyName':'w'},
    { 'charCode':121, 'keyName':'x'},
    { 'charCode':122, 'keyName':'y'},
    { 'charCode':123, 'keyName':'z'},
];
//création de différentes variables
 
var tab = ['0','1','2','3','4','5','6','7','8','9']
var clavier = document.getElementById('clav');
var insertion = document.getElementById('insert');
var reset = document.getElementById('refresh');
 
//création du clavier et insertion de celui dans le dom dans la div "clav"
 
keyboard.forEach(function(key){
    var touche = document.createElement('button');
    touche.className = 'touche';
    touche.setAttribute('id','touche-'+key.charCode);
    touche.setAttribute('data-key',key.charCode);
    touche.textContent = key.keyName;
    clavier.appendChild(touche);
});
 
//création de l'évènement au click
 
var clik = document.querySelectorAll('.touche');
clik.forEach(function(argu){
    argu.addEventListener('click',function(event){
        var chiffre = tab[argu.textContent.charCodeAt(0) % 10]
        insertion.value = insertion.value + chiffre;
        });
});
 
//création de l'évènement au keypress
 
var tutch = document.querySelectorAll('.touche');
tutch.forEach(function(argu){
    argu.addEventListener('keypress',function(event){
        var keybo = event.charCode;
        if (tutch){
        var chiffre = tab[argu.textContent.charCodeAt(0) % 10];
        insertion.value = insertion.value + chiffre;
        }
    })
})
 
//creation event du reset
 
reset.addEventListener('click',function clear(){
    insertion.value = "";
});

Le problème est que je n'arrive pas à faire le lien correctement entre les touches réelles et celle faite par le code. :/

Autre question que je ne comprend pas et pourtant ça marche très bien... C'est le passage du modulo !! Je comprend pas pourquoi avec la lettre "c" il m'affiche bien le 10ème élément du tableau (et donc à l'indice 9) alors que son chartCode est 100 et donc il devrait m'afficher autre chose vu que 100%10 = 0 !!
J'ai même fait un petit code à part qui reprenais mon code et celui ci m'affiche bien le 0:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
var array = ['0','1','2','3','4','5','6','7','8','9'];
var chiffre = 100 % 10;
console.log(array[chiffre]);
je comprends pas trop le délire...

Bref merci d'avance =)