Récupérer une valeur contenu dans un array

**giovanni** · 22/01/2019, 15h13

bonjour
voila un JavaScript ,je sais pas reprendre valeur ,cliquer cliquer...
par exemple je clique
1 5 67 89 43
ben par exemple le 1 additionner au 43 ou 67 moins 5 ...
enfin c'est reprendre les valeur pour travailler avec ..
merci

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
77
78
79
80
81
82
83
84
85
86
"use strict";
// ----------
// 0- crÃ©ation de la table - 90 cases
let table = document.createElement('table');
let tbody = table.createTBody();
for (let row = 1; row <= 10; row++) 
{
  let tr = tbody.insertRow();
  for (let col = 1; col <= 9; col++) 
  {
    let key = row + ((col-1) * 10);
    let td = tr.insertCell();
    let label = document.createElement('label');
    let input = document.createElement('input');
    input.type = 'checkbox';
    input.name = 'cb['+key+']';
    input.value = key; // on met la clÃ© en valeur
    label.append(key, input);
    td.append(label);
  }
}
document.getElementById('form90cases').prepend(table); // insert la table dans le formulaire
// ----------
// 1- checkbox
let allBoxes = document.querySelectorAll('#form90cases input[type=checkbox]');
allBoxes.forEach(function(box) {
  box.addEventListener('click', function(){ 
//    box.parentNode.parentNode.classList.toggle('on');
    box.closest('td').classList.toggle('on');
    show_results();
  });
});
// ----------
// 2- Reset (Vider la grille)
let btnReset = document.querySelector('#form90cases button[name="btn-reset"]');
btnReset.addEventListener('click', function(){ 
  for (let box of allBoxes) {
    box.checked = false; // dÃ©coche la sÃ©lection
    box.removeAttribute('checked'); // dÃ©coche la sÃ©lection
//    box.parentNode.parentNode.classList.remove('on');
    box.closest('td').classList.remove('on');
  }
    show_results();
});
// ----------
// 3- inverser la sÃ©lection
let btnInvert = document.querySelector('#form90cases button[name="btn-invert"]');
btnInvert.addEventListener('click', function(){ 
  for (let box of allBoxes) {
    box.checked = !box.checked; 
//    box.parentNode.parentNode.classList.toggle('on');
    box.closest('td').classList.toggle('on');
  }
    show_results();
});
// ----------
// 4- Envoyer
let btnEnvoi = document.querySelector('#form90cases button[name="btn-envoi"]');
btnEnvoi.addEventListener('click', function(){ 
    show_results();
});
// ----------
function show_results()
{
	let show_results = document.getElementById('show-results');
	let nbre_results = document.getElementById('nbre-results');
	let results = [];
	let ii = 0;
  for (let box of allBoxes) 
  {
    if( box.checked )
	  {
		  results[ii] = Number(box.value);
		  ii++;
	  }
  }
  results.sort(compareNombres); // ordre croissant
 
  // Affichage des rÃ©sultats
  nbre_results.textContent = ii;
//  show_results.textContent = results.join(', ');
  show_results.innerHTML = '<b>' + results.join('</b>, <b>') + '</b>';
//  show_results.innerHTML = '<ul><li>' + results.join('</li><li>') + '</li></ul>'; // liste Ã* puces
}
function compareNombres(a, b) { return a - b; } // permet de trier correctement les nombres
// ----------

**SpaceFrog** · 22/01/2019, 16h05

oui mais si tu cliques 24 à droite et 72 en bas il se peut qu'à la fin tu finisses avec 7 ... en plus ?

**giovanni** · 22/01/2019, 21h44

Code :

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

1
2
  show.Number(1);
  show.Number(2);

ca ne affiche rien

**danielhagnoul** · 22/01/2019, 22h58

Je ne sais pas ce que @SpaceFrog a compris à votre problème, pour moi c'est très nébuleux.

Il nous manque les codes HTML et CSS et une meilleure explication du contenu de la table et quel résultat obtenir !

**SpaceFrog** · 23/01/2019, 10h30

@Daniel => Non j'ai rien capté, mais je voulais juste participer à une discussion de mecs bourrés ...

Code :

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

 show.Number(1);

c'est du javascript ???

Si la problématique c'est de manipuler un array (Ce qui est trèèèèèèèèèèèèèèèèèèèès loinnnnnnnnnnnnnnnnnn d'être clair dans la question)

Code :

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

1
2
3
4
 
MyArray=[1,2,"coucou",4,5];
console.log(MyArray[0]);  // => 1
console.log(MyArray[2]);  // => coucou

**giovanni** · 23/01/2019, 12h13

https://codepen.io/paolo3/pen/KJwdez
voila comme ca vous avez tout
au fait récupéré sur un array ,enfin ,je suis pas sur si il sont stoker dans array ,si oui lequel

**ProgElecT** · 23/01/2019, 13h55

Salut

Exemple pour les cases cochées 24 26 et 30:
results contient l'array : 24,26,30
Si tu veux récupérer le 2ém, tu fais var recup2 = results[1] (donc égal 26).

Si tu fais var StrTbl = results.join('|'); tu récupères une variable typée string de tout ton tableau results, séparé par le caractère | soit: 24|26|30

**giovanni** · 23/01/2019, 15h11

si j'ajoute ca

Code :

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

1
2
3
4
5
6
7
8
9
  for (let box of allBoxes) 
  {
    if( box.checked )
	  {
		  results[ii] = Number(box.value);
		  ii++;
      var recup2[ii] = results[ii]
	  }
  }

je fais comment pour afficher recup2[1]
etc
ce qui me brouille c'est ca

Code :

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

show_results.innerHTML = '<b>' + results.join('</b>, <b>') + '</b>';

je ne sais comment utiliser recup2 avec ca

**danielhagnoul** · 26/01/2019, 10h38

Lorsqu'on corrige un code, on se laisse souvent influencé par la structure du code existant, même lorsque l'on sait qu'il est imparfait. C'est le cas ici pour le paramètre ii qui est totalement inutile !

Correction de mon code précédent :

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
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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    // 0- création de la table - 50 cases
 
    let table = document.createElement('table');
    let tbody = table.createTBody();
 
    for (let row = 1; row <= 7; row++) {
        let tr = tbody.insertRow();
 
        for (let col = 1; col <= 6; col++) {
            let key = row + ((col - 1) * 7);
            let td = tr.insertCell();
            let label = document.createElement('label');
            let input = document.createElement('input');
 
            input.type = 'checkbox';
            input.name = 'cb[' + key + ']';
            input.value = key; // on met la clÃ© en valeur
            label.append(key, input);
            td.append(label);
        }
    }
 
    document.getElementById('form90cases').prepend(table); // insert la table dans le formulaire
 
    // 1- checkbox
    let allBoxes = document.querySelectorAll('#form90cases input[type=checkbox]');
 
    allBoxes.forEach(function (box) {
        box.addEventListener('click', function () {
            //    box.parentNode.parentNode.classList.toggle('on');
            box.closest('td').classList.toggle('on');
            show_results();
        });
    });
 
    // 2- Reset (Vider la grille)
    let btnReset = document.querySelector('button[name="btn-reset"]');
 
    btnReset.addEventListener('click', function () {
        for (let box of allBoxes) {
            box.checked = false; // dÃ©coche la sÃ©lection
            box.removeAttribute('checked'); // dÃ©coche la sÃ©lection
            //    box.parentNode.parentNode.classList.remove('on');
            box.closest('td').classList.remove('on');
        }
        show_results();
    });
 
    // 3- inverser la sÃ©lection
    let btnInvert = document.querySelector('button[name="btn-invert"]');
 
    btnInvert.addEventListener('click', function () {
        for (let box of allBoxes) {
            box.checked = !box.checked;
            //    box.parentNode.parentNode.classList.toggle('on');
            box.closest('td').classList.toggle('on');
        }
        show_results();
    });
 
    // 4- Envoyer
    let btnEnvoi = document.querySelector('button[name="btn-envoi"]');
 
    btnEnvoi.addEventListener('click', function (ev) {
        ev.stopPropagation();
        ev.preventDefault();
 
        console.log(`Soumission interrompue, voir les résultats : `);
 
        let resultats = show_results();
 
        document.querySelector('#Aff').textContent = `Il y a ${ resultats.length } nombres : ${ resultats.join(', ')}.`;
    }, {
        capture: false,
        passive: false,
        once: false
    });
 
    function compareNombres(a, b) {
        return a - b;
    }
 
    function show_results() {
        let
            show_results = document.getElementById('show-results'),
            nbre_results = document.getElementById('nbre-results'),
            results = [];
 
 
        for (const box of allBoxes) {
 
            if (box.checked) {
                results.push(Number(box.value));
            }
        }
 
        results.sort(compareNombres);
 
        show_results.textContent = results.join(', ');
        nbre_results.textContent = results.length;
 
        return results;
    }
 
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

Récupérer une valeur contenu dans un array

JavaScript

Vue hybride

Discussions similaires

Partager

Partager