TypeError collection getElementsByClassName

Bonjour,

J'ai un problème dans mon js, j'ai une erreur Type error : content[i] is undefuned....

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

window.onload=function(){   var content = document.getElementsByClassName("bibcontent"); var button = document.getElementsByClassName('voirplus');   for (var i = 0; i < button.length; i++){   button[i].onclick = function() {   if(content[i].id == "open") { content[i].id = ""; button[i].innerHTML = "Voir plus"; } else { content[i].id = "open"; button[i].innerHTML = "Réduire"; }} };}

---

Pourtant je le défini bien dans le onload...

Voici un bout de PHP associé :

Code:

---

1 2	$monarray=t($monarray).'<div id="close" class="bibcontent">'."Résumé : ".$row['Resume'].'</div>'.'<a class="voirplus">Voir plus</a>'.'<br>'; return $monarray;

---

J'ai une boucle foreach qui affiche plusieurs blocs à réduire avec a chaque foisd un bouton "voir plus".


Help :3

Quel navigateur ? quelle version ?
http://caniuse.com/#feat=getelementsbyclassname

as tu testé le length ou le contenu de content ?

Code:

---

1 2 3

console.log(content) console.log(content.length)

---

Bonjour,

Firefox 41.0.2.

Je vais essayer, mais je ne comprends vraiment pas pourquoi au debut de mon code le content estr bien défini puis dans le bloc du if il ne l'ai pas.

Edit : Les log confirmes bien que le content contient une collection de 21 éléments, length = 21. Et à la ligne d'après (content[i[.id ...) ca me dit que c'est undefined .........................

tu boucles avec le même id ???
Un id doit être unique sur la page

C'est à dire ?

Non je boucle en fonction de l'id d'un certain content, qui dépend de i, en fait je veux que si on click sur le bouton avec i=3, et bien l'id du content qui correspond passe en open/close

peux tu nous montrer le code html généré ?

C'est pour un site drupal.

Code:

---

1 2 3

<div class="content"> Date de publication : Feb 21 2015<br>Auteurs : ..........</div><a class="voirplus">Voir plus</a><br>Lien : <a href="http://www.ncbi.nlm.nih.gov/pubmed/26231761">http://www.ncbi.nlm.nih.gov/pubmed/26231761</a><br><br> </div>

---

Ceci ? J'ai mis des "..." pour le résumé qui apparait en entier, alors qu'il devrait etre réduit mais bon.


En fait ca correspond juste à mon PHP :

Code:

---

1 2 3 4 5 6 7 8

{ $monarray=t($monarray).'<div class="bibcontent" id="close">'."Résumé : ".$row['Resume'].'</div>'.'<a class="voirplus">Voir plus</a>'.'<br>'; } if($row['URL']!=NULL) { $monarray=t($monarray)."Lien : ".$this->make_links_clickable((string)$row['URL']).'<br>'; } return $monarray;

---

Alors je crois que cela est lié à mon for, en fait mon i est toujours à 21. Si je remplace le i par un chiffre quelconque entre 0 et 20 le js fonctionne mais que sur ce bouton la du coup...

Et j'ai une petite question à ajouter, depuis que j'utilise le getElementsByNameClass, mon css s'affiche plus, il l'y a pas de mise en page.

Code:

---

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

body { background:#eee; }   #bibcontent{ width: 400px; background: #fff; padding: 20px; padding-top: 0; font-family: calibri; font-size: 12px; color:#444; margin: 0 auto;   max-height: 70px; overflow: hidden;   -webkit-transition: max-height 0.7s; -noz-transition: max-height 0.7s; transition: max-height 0.7s; }   #bibcontent.open{ max-height: 1000px;   -webkit-transition: max-height 0.7s; -noz-transition: max-height 0.7s; transition: max-height 0.7s; }   #voirplus{ background: #1594e5; color:#fff;   font-family: calibri; display: block; width: 100px; font-size: 16px; text-transform: uppercase; padding: 10px; text-align: center; margin: 20px auto; cursor: pointer; }

---

Bonjour,
:faq: Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?.

Pour ton 2^éme point, il est préférable d'ouvrir une nouvelle discussion.