Comment manipuler plusieurs tableaux ?

:salut:

Voilà ce que l'on peut faire avec les HTML, CSS et JS d'aujourd'hui.

Reste à comprendre et à adapter ces codes aux contraintes de votre exercice, il faut bien que vous ayez un peu de travail ! :mouarf:

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
@charset 'utf-8';
 
/* style mini */
 
*,
*:after,
*:before {
    box-sizing: border-box;
}
 
html {
    font-family: sans-serif;
    font-size: 62.5%;
}
 
/* début code du test */
 
form {
    /* Uniquement centrer le formulaire sur la page */
    margin: 0 auto;
    width: 40rem;
    /* Encadré pour voir les limites du formulaire */
    padding: 1rem;
    border: 1pt solid #CCC;
    border-radius: 1rem;
}
 
form div+div {
    margin-top: 1rem;
}
 
label {
    /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
    display: inline-block;
    width: 9rem;
    text-align: right;
}
 
input,
textarea {
    /* Pour s'assurer que tous les champs texte ont la même police.
       Par défaut, les textareas ont une police monospace */
    font: 1rem sans-serif;
    /* Pour que tous les champs texte aient la même dimension */
    width: 20rem;
    box-sizing: border-box;
    /* Pour harmoniser le look & feel des bordures des champs texte */
    border: 1pt solid #999;
}
 
input:focus,
textarea:focus {
    /* Pour souligner légèrement les éléments actifs */
    border-color: #000;
}
 
textarea {
    /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
    vertical-align: top;
    /* Pour donner assez de place pour écrire du texte */
    height: 5rem;
}
 
.button {
    /* Pour placer le bouton à la même position que les champs texte */
    padding-left: 9rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* même taille que les étiquettes */
}
 
button {
    /* Cette marge supplémentaire représente grosso modo le même espace que celui
       entre les étiquettes et les champs texte */
    margin-left: .5rem;
}
 
/* fin code du test */

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<form id="myForm">
    <label>First Name : </label>
    <input type="text" id="firstName" name="firstName" size="15">
    <br>
    <label>Name : </label>
    <input type="text" id="lastName" name="lastName" size="15">
    <br>
    <div class="button">
        <button type="submit">Valider</button>
    </div>
    <br>
    <label>Result : </label><input type="text" id="result" size="25">
</form>

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const
        elemFirstName = document.querySelector('#firstName'),
        elemLastName = document.querySelector('#lastName'),
        elemResult = document.querySelector('#result');
 
    let
        arName = ['Chaton', 'Aigle', 'Bison', 'Blaireau'],
        arAdjective = ['PETEUR', 'BIGLEUX', 'CRETIN', 'MALIN'],
        arLetters = ['a', 'b', 'c', 'd'];
 
    document.querySelector('#myForm').addEventListener('submit', ev => {
        ev.stopPropagation();
        ev.preventDefault();
 
        let strFirstName = elemFirstName.value;
 
        // debug, console, touche F12
        console.log(strFirstName);
 
        let
            chrFirstName = strFirstName.charAt(0),
            tmp = [];
 
        for (const [i, item] of arLetters.entries()) {
            if (chrFirstName !== item) {
                tmp.push(arName[i]);
            }
        }
 
        elemResult.value = tmp.join(', ');
 
    }, {
        capture: false,
        passive: false, // false à cause de ev.preventdefault();
        once: false
    });
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});