11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Voilà j'ai un site web qui affiche comme titres les jours de la semaine. J'aid onc 7 titres différents. Ces titres-jours ont chacune un span ayant comme class "0_xxx" "2_xxx" jusqu'à "6_xxx".

Je veux provoquer un click sur chacun de ces span en fonction du jour en cours. J'ai donc fait le code javascript suivant :

var lejour =new Date();
var resultat, element;

switch(lejour.getDay())
{
case 0:
resultat = "0_xxx";
break;
case 1:
resultat = "1_xxx";
break;
case 2:
resultat = '2_xxx';
break;
case 6:
resultat = "6_xxx";
break;
}
document.getElementByClass(resultat).click();


Qu'en pensez-vous?
Pourquoi çà ne fonctionne pas?

Merci de vos conseils.

Ryps
Salut

L'erreur que je constate c'est le " getElementByClass "

celui ci te retourne un tableau, et dans ton code quand tu fais le .click() tu le fais sur un élément, et non un tableau.

document.getElementByClass(resultat).click();

n'existe pas .....

à la limite travail sur des ID et non des classes. ou alors il faut faire quelque chose du genre
getElementByClass(resultat)[0].click()
Administrateur
Et il faut faire une boucle sur l'ensemble des éléments retournés par getElementsByClassName car il peut y en avoir 0 ou plusieurs dans un même document.
Merci à tous pour vos conseils,

Cependant pour l'instant je n'y arrive pas et j'en suis à douter que mon appel à getElementsByClassName renvoie un résultat, ne serait-ce qu'un tableau comme ce qui semble être attendu.
Comment puis-je vérifier que cet étape fonctionne?

D'autre part est-ce qu'il est conseillé de décomposer ou pas cette seconde étape :

var divsList = new Array();
divsList = document.getElementsByClassName(resultat)[0].click();


ou

var divsList = new Array();
divsList = document.getElementsByClassName(resultat);
divsList[0].click();
Modérateur
ryps a écrit :
Comment puis-je vérifier que cet étape fonctionne?

Avec un simple console.log() (un petit article intéressant de Dew justement par ici : http://www.alsacreations.com/astuce/lire/1436-console-javascript.html).
var divsList = document.getElementsByClassName('class');
console.log(divsList);

t'affichera le contenu de ta variable divsList dans la console de ton inspecteur de code (cf article). Indispensable pour developper/debuguer.

Bonne soirée Smiley murf
Modifié par _laurent (16 Jul 2015 - 20:58)
Salut,
pour avoir la taille par exemple :
document.getElementsByClassName("0_xxx").length

et pour l'autre à la limite tu fais directement et le click ça dépend si tu va vouloir faire d'autre chose sur divList ou pas.

var divsList=document.getElementsByClassName(resultat);

Edit : Ah bah j'avais pas vu la réponse juste au dessus ..
Du coup je précise que sur firefox je fais ctrl shift k pour avoir une console javascript (et j'utilise pas le console.log ^^juste la ligne que j'ai mis en haut)
Modifié par mathieu1004 (16 Jul 2015 - 21:03)
J'imagine que quand on fait un

document.write(document.getElementsByClassName("0_xxx").length)


et qu'un 0 apparait çà veut dire que la fonction n'a pas trouver la classe recherchée, n'est-ce pas?

Cependant dans la console j'ai l'impression qu'il trouve ma classe cat j'ai un HTMLCollection[<a.0_xxx>] qui apparait avec des propriétés à filtrables sur la droite de mon déboggueur Mozilla firefox(39.0). Parmi les propriétés je vois onclick() mais moi je souhaite réaliser un
click()
.

Merci
salut,
pour simuler un clic en JS il faut plutôt passer par document.createEvent.
Je pense que ça ne doit pas être indispensable pour ton cas. Il suffirait d'appeler la fonction traitant l'évènement de clic.
Tu peux par contre simplifier ton code et éviter une condition inutile :

var jours = ["0_xxx", "1_xxx", "2_xxx", "3_xxx", "4_xxx", "5_xxx", "6_xxx"],
      resultat = jours[new Date().getDay()];
Bonjour à tous

Zelalsan a écrit :
salut,
pour simuler un clic en JS il faut plutôt passer par document.createEvent.


J'ai essayé cela:

var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
document.getElementById("6_xx").dispatchEvent(evt);


mais pour l'instant je n'ai pas trop de succès.
Une autre idée?

Merci
Zelalsan a écrit :
salut,
Il suffirait d'appeler la fonction traitant l'évènement de clic.

Selon toi quelle est cette fonction?

Moi j'ai faits çà:

var jours = ["0_blocktitre", "1_blocktitre", "2_blocktitre", "3_blocktitre", "4_blocktitre", "5_blocktitre", "6_blocktitre"],
resultat = jours[new Date().getDay()];
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", false, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementsByClassName("3_blocktitre").dispatchEvent(evt);


Malgré cela mon blocktitre (3_blocktitre = 3_xxx) ne s'ouvre pas comme il le devrait.
Quelle est la fonction qui gère le clic à la base ? C'est cette fonction que tu appelles directement :

taFonctionQuiGereLeClic();   // tout bêtement

La méthode getElementsByClassName retourne un tableau donc même s'il n'y a qu'un élément ayant la classe que tu recherches, l'utilisation implique de spécifier l'index :

document.getElementsByClassName("3_blocktitre")[0].dispatchEvent(evt);