Bouton ne fonctionne pas

Bonjour,

J'ai créé un bouton "voir plus" qui permet d'afficher la suite d'un résumé s'il est trop long. Mais quand je veux cliquer sur le bouton rien ne se passe.

Voici mon code :
JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
var content = document.getElementById("bibcontent");
var button = document.getElementById("voirplus");
 
button.onclick = function() {
 
	if(content.className == "open") {
	content.className = "";
	button.innerHTML = "Show more";
	} else {
	content.className = "open";
	button.innerHTML = "Show less";
	}
};

J'utilise le js dans un bloc Drupal 8, dans mon php ca donne ca :

Code:

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

Voila je ne comprends pas... J'ai cette erreur : TypeError: button is null; sur ma ligne button.onclick = function() {

Pourtant lorsque je test mon programme basiquement avec un fichier html dans mon navigateur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
 
<html>
	<head>
		<meta charset="utf-8" />
		<Link href="style.css" type="text/css" rel="stylesheet">
	</head>
 
	<body>
 
		<div id="bibcontent"> ajoutez un texte long</div>
		<a id="voirplus">Voir plus</a>
		<script src="test.js"></script>
 
	</body>
</html>

Tout fonctionne...

Voici du css si vous voulez tester :

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
body {
	background:#eee;
}
 
#content{
	width: 400px;
	background: #fff;
	padding: 20px;
	padding-top: 0;
	font-family: calibri;
	font-size: 18px;
	color:#444;
	margin: 0 auto;
 
	max-height: 170px;
	overflow: hidden;
 
	-webkit-transition: max-height 0.7s;
	-noz-transition: max-height 0.7s;
	transition: max-height 0.7s;
}
 
#content.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: 140px;
	font-size: 24px;
	text-transform: uppercase;
	padding: 10px;
	text-align: center;
	margin: 20px auto;
	cursor: pointer;
}

Merci d'avance pour votre aide.

Cordialement.

Bonjour,
bizarre quand même d'un coté

Code:

var content = document.getElementById("bibcontent");

et de l'autre

Code:

<div id="content"> ajoutez un texte long</div>

Re

Oui pardon j'ai édité mon post, j'avais pris l'ancienne version du html, bref ca ne change rien au problème ^^

Re

J'ai finalement mis mon js dans un windows.onload, et tout fonctionne.