Ajout de fonction à plusieurs div

Version imprimable

Bonjour,

Je cherche à récupérer la valeur ou le contenu d'une div via une fonction JS, j'ai essayé le code suivant en me basant sur plusieurs forums que j'ai lu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="button" value="3">bouton</div>
<div class="button" value="4">autre bouton</div>
<style>
    div {
        background-color: red;
    }
    div:hover {
        cursor: grab;
    }
</style>
 
<script>
    button = document.querySelectorAll("button");
    button.forEach(button => {
        button.addEventListener('click', value => {
            console.log("il est passé par ici")
            console.log(button.getAttribute("value"));
        })
    })
</script>

Les console.log ne me renvoie rien, je pense du coup que je ne passe par la fonction, j'aimerai bien savoir pourquoi

12/05/2021, 14h25
SpaceFrog

un div n'a pas d'attribut value ...
passe plutot par des data-value ...
https://developer.mozilla.org/fr/doc...ata_attributes

Merci pour le data-value, ça a l'air en effet de correspondre à mon soucis, j'ai pu remplacer par ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="button1" data-value="1">bouton</div>
<div id="button2" data-value="2">autre bouton</div>
 
<script>
    for (var compteur = 1; compteur < 3; compteur++){
        id = "button" + compteur;
        console.log("id : " + id);
        document.getElementById(id).addEventListener("click", function () {
            console.log("il est passé par ici");
            console.log(document.getElementById(id).dataset.value);
        })
    }
</script>

Bon le souci c'est que maintenant la variable renvoyée par le click est forcément 2

12/05/2021, 17h02
SpaceFrog

C'est un peu confus ...
Dis nous plutot ce que tu veux faire de tes data-value ...

vous n'avez pas bien déclaré la variable "id" donc c'est pour ça que vous avec un résultat inattendu. je crois que votre code crée une variable "id" globale.

essayez plutôt ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div id="button1" data-value="1">bouton</div> <div id="button2" data-value="2">autre bouton</div> <script> "use strict"; for (var compteur = 1; compteur < 3; compteur++){ let id = "button" + compteur; console.log("id : " + id); document.getElementById(id).addEventListener("click", function () { console.log("il est passé par ici"); console.log(document.getElementById(id).dataset.value); }); } </script>
ça c'est pour le coté javascript.
par contre du côté fonctionnalités, je suis un peu comme SpaceFrog, je ne comprends pas trop ce que vous voulez faire.

17/05/2021, 12h05
Eckmül

Citation:

Envoyé par SpaceFrog

C'est un peu confus ...
Dis nous plutot ce que tu veux faire de tes data-value ...

Merci de ta réponse Space Frog, en fait, j'ai un ensemble de liste de résultats de recherche qui sont incrémenté via une requête php, ce qui me donne un résu

Résultat 1 :
Description :
blalbalbalblallab

avec Résultat 1 qui est dans une div appeler PodResult1 et ainsi de suite jusqu'au nombre de résultats que la requête php me donne.
à la fin j'aimerai cliquer sur la div Résultat1 pour afficher uniquement se résultat dans la div résultat comprenant tous les résultats

PS : La solution de Mathieu a bien marché, du coup, je vais poursuivre dans cette voix, marqué résolu et souhaité bonne continuation à tous !