Bouton ne fonctionne pas

**cocobuck** · 21/03/2016, 15h57

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 :

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

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

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

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

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

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

**NoSmoking** · 21/03/2016, 16h07

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

Code :

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

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

et de l'autre

Code html :

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

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

**cocobuck** · 22/03/2016, 10h20

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

**cocobuck** · 22/03/2016, 10h46

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

Bouton ne fonctionne pas

JavaScript

Discussions similaires

Partager

Partager