Discussion :

[sebolix44]

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

[-Nikopol-]

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')]

[NoSmoking]

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

[sebolix44]

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-