Boutons voir+ voir -

Version imprimable

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:

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:

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

Bonjour,
lorsque tu écris

Code:

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:

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); }; }
Citation:

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.

24/04/2021, 21h15
ypcman

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