TypeError collection getElementsByClassName

**cocobuck** · 23/03/2016, 10h45

Bonjour,

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

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
 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 23/03/2016, 11h07

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
console.log(content)
console.log(content.length)

**cocobuck** · 23/03/2016, 11h34

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 .........................

**SpaceFrog** · 23/03/2016, 13h39

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

**cocobuck** · 23/03/2016, 14h03

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

**SpaceFrog** · 23/03/2016, 14h04

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

**cocobuck** · 23/03/2016, 14h22

C'est pour un site drupal.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

**cocobuck** · 23/03/2016, 15h05

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 :

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