Boutons voir+ voir -

**ypcman** · 24/04/2021, 15h00

Bonjour.
Mon objectif est le suivant :
je veux pouvoir, au sein d'un formulaire, afficher par défaut le début d'un texte avec , à coté un bouton Voir+. Après appui sur ce bouton, le texte complet s'affiche ainsi qu'un bouton Voir-. En appuyant sur ce second bouton, je reviens à l'affichage réduit intial.
J'ai écrit 2 fonctions js "voir_plus()" et "voir_moins() dans un script test.js :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var texte = "Ceci est le texte que je veux pouvoir montrer en format réduit ou non";
document.getElementById("p1").innerHTML = texte.substring(0, 20);
 
function voir_plus(id, texte) {
	document.getElementById("p" + id).innerHTML = texte
	document.getElementById("fbutton" + id).value = 'Voir -';
	// document.getElementById("fbutton" + id).setAttribute('onClick', voir_moins(id, texte));
}
 
function voir_moins(id, texte) {
	document.getElementById("p" + id).innerHTML = texte.substring(0, 20)
	document.getElementById("fbutton" + id).value = 'Voir +';
	document.getElementById("fbutton" + id).setAttribute('onClick', voir_plus(id, texte));
}

et une page de test :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS Test</title>
</head>
<body>
<form>
<p id="p1"></p>
<input id="fbutton1" type="button" value="Voir +"  onClick="voir_plus('1',texte)">
</form>
<script src="test.js";></script>
</body>
</html

Mon pb actuel, c'est que je ne réussis pas à changer la valeur du onClick sans que l'action soit réalisée. Si, dans voir_plus, j'enlève le commentaire de la ligne modifiant la valeur de onClick, la fonction exécute cette ligne comme si je lui demandais de simuler un click alors que je veux juste dire que la prochaine fois qui'l y aura un clic, l'action sera différente.
Le id c'est juste que je compte insérer cette fonctionnalité dans une table avec de multiples lignes

Bref, je suis un peu perdu. merci de vos lumières

**NoSmoking** · 24/04/2021, 18h56

Bonjour,
lorsque tu écris

Code :

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

document.getElementById("fbutton" + id).setAttribute('onClick', voir_moins(id, texte))

tu affectes à onClick le résultat de la fonction voir_moins.

Si tu souhaites rester dans cette façon de faire il te faut dans ce cas passer par l'affectation d'une fonction anonyme qui, elle, appellera ta fonction.
Par exemple :

Code :

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

1
2
3
4
5
6
7
8
function voir_plus(id, texte) {
    document.getElementById("p" + id).innerHTML = texte
    document.getElementById("fbutton" + id).value = 'Voir -';
    //document.getElementById("fbutton" + id).setAttribute('onClick', voir_moins(id, texte));
    document.getElementById("fbutton" + id).onclick = () => {
        voir_moins(id, texte);  
    };
}

Le id c'est juste que je compte insérer cette fonctionnalité dans une table avec de multiples lignes

il y aura surement une autre façon de faire que d'utiliser une ribambelle d'ID.

**ypcman** · 24/04/2021, 21h15

Bonsoir NoSmoking.
Ton post résout parfaitement mon problème.
merci !

Boutons voir+ voir -

JavaScript

Discussions similaires

Partager

Partager