Comment manipuler plusieurs tableaux ?

**Tamzoro** · 22/05/2018, 17h07

Bonjour,

Je sollicite votre aide car j'aimerais bien apprendre à manipuler plusieurs tableaux (ici 3) , les tableaux en questions sont les suivants;

Code :

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

1
2
3
4
5
tabName =newArray('Chaton','Aigle','Bison','Blaireau'); 
 
tabAdjective =newArray('PETEUR','BIGLEUX','CRETIN','MALIN');
 
tabLetters =newArray('a','b','c','d');

Lorsque l'utilisateur entre sur html un prenom et un nom comme par exemple Amelia Bael ce qui devra afficher en input sera Chaton Bigleux.

Voici, mon code je n'arrive déjà pas à récupérer le premier indice de la tabName je ne comprends pas...
Pour info je ne peux pas utiliser de document.getElementById.

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
<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
 
  tabName = new Array('Chaton', 'Aigle', 'Bison', 'Blaireau');
  tabAdjective = new Array('PETEUR', 'BIGLEUX', 'CRETIN', 'MALIN');
  tabLetters = new Array('a','b','c','d');
 
  function main()
  {
    first_name = save_first_name.value;
    //alert(first_name);
    first_name_character = first_name.charAt(0);
 
    i = 0;
    while(first_name_character != tabLetters)
    {
 
        tmp = tabName[i];
        i++;
 
    }
 
 
  }
 
 
  </script>
 
 
  <body>
    <center>
     <h2><ul>Exercice 01</ul></h2>
     First Name : <input type="text" id="save_first_name" size="15">
     Name :     <input type="text" id="save_name" size="15">
                <input type="submit" value="ok" onclick="main()">
                <input type="text" id="result" size="25">
     </center>
  </body>
 
  </head>
 </html>

Edit: Mon problème est résolu

**danielhagnoul** · 22/05/2018, 21h40

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 !

Code CSS :

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
@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 HTML :

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

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 JavaScript :

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
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
});

Comment manipuler plusieurs tableaux ?

JavaScript

Discussions similaires

Partager

Partager