IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Passer HTMLCollection en argument dans une fonction


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    août 2019
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : août 2019
    Messages : 10
    Points : 9
    Points
    9
    Par défaut Passer HTMLCollection en argument dans une fonction
    J'arrive à faire apparaître des lettres en survolant une image avec cette fonction :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    let king_img=document.getElementById("king")
    var king_letters=document.getElementsByClassName("king_line")
    function afficheKingLine(){
        for (let i=0; i<king_letters.length;i++){
            king_letters[i].style.display="block"          
        }    
    }
    king_img.onmouseover = afficheKingLine
    Mais lorsque je veux la réutiliser pour passer des arguments ça ne fonctionne pas :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function afficheLine(arg){  
        for (let i=0;i<arg.length;i++){
            arg[i].style.display="block"  
            console.log(arg[i])      
        }    
    }
    king_img.onmouseover = afficheLine(king_letters)
    Qu'est-ce que je n'ai pas bien compris ?
    Merci d'avance

  2. #2
    Responsable LaTeX

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    mai 2013
    Messages
    2 129
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2013
    Messages : 2 129
    Points : 11 190
    Points
    11 190
    Billets dans le blog
    5
    Par défaut
    Parce que c'est une HTMLCollection, ca ne possède pas toutes les méthodes d'un tableau. Fais un console.log de document.getElementsByClassName('.myclass') et de document.querySelectorAll('.myclass') tu pourras y voir les méthodes associées.
    Soit tu passes par querySelectorAll ce qui me semble mieux ici, ou alors tu transformes ton HTMLCollection en array avec le spread operator : const elmts = [...document.getElementsByClassName('.myclass')]

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 625
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 625
    Points : 39 649
    Points
    39 649
    Par défaut
    Bonjour,
    ton principal soucis vient de cette ligne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    king_img.onmouseover = afficheLine(king_letters)
    en écrivant de la sorte, tu affectes à king_img.onmouseover le résultat de la fonction afficheLine.

    Il te faut plutôt écrire, c'est une des façons de faire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    king_img.onmouseover = () => {
      afficheLine(king_letters);
    }

  4. #4
    Futur Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    août 2019
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : août 2019
    Messages : 10
    Points : 9
    Points
    9
    Par défaut
    Merci @NoSmoking

    Effectivement, maintenant ça marche avec le querySelectorAll ou avec le getElementsByClassName :

    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
    /* Affiche les lettres de la ligne lors du survol de l'image*/
    function afficheLine(arg){  
        for (let i=0;i<arg.length;i++){
            arg[i].style.display="block"               
        }    
    }
     
    /* Gestion du survol de l'image du Roi*/
    let king_img=document.getElementById("king")
    var king_letters=document.querySelectorAll('.king_line')
     
    king_img.onmouseover = () => {
        afficheLine(king_letters);
    }
     
     
    /* Gestion du survol de l'image de la Dame*/
    let queen_img=document.getElementById("queen")
    var queen_letters=document.getElementsByClassName("queen_line")
     
    queen_img.onmouseover = () => {
        afficheLine(queen_letters);
    }
    PS: Merci aussi @-Nikopol-

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Passer plusieurs arguments dans une fonction
    Par philippef dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 03/02/2016, 14h04
  2. Passer un argument dans une fonction appelée depuis un onChange
    Par francky74 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 05/03/2015, 10h28
  3. passer un tableau en argument dans une fonction
    Par rogerio dans le forum Débuter
    Réponses: 6
    Dernier message: 30/10/2008, 13h15
  4. Comment passer un argument dans une fonction
    Par DeezerD dans le forum ActionScript 3
    Réponses: 1
    Dernier message: 22/01/2008, 19h13
  5. Passer un tableau PHP en argument dans une fonction javascript ?
    Par The Molo dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 18/05/2007, 13h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo