Dans un script, Remplacer le mode « hasard » par le mode « suivant »

Michel B. · 3 Novembre 2018

Bonjour à toutes et à tous,
Vous connaissez sans doute ce petit script :

Code:

<body onload="actualiser();">
<div id="Variante"></div>
<button onclick="actualiser()">Actualiser</button>
<script type="text/javascript">
function actualiser(){
var proverbes = new Array(
"Il faut manger pour vivre et non vivre pour manger.",
"À chaque jour suffit sa peine.",
"Les plaisanteries les plus courtes sont les meilleures.",
"Tel est pris qui croyait prendre."
);
document.getElementById("Variante").innerHTML=proverbes[Math.floor(Math.random() * proverbes.length)];}
</script>
</body>

Ce petit script affiche sur une page web une variante prise au hasard dans une liste et remplacée par une autre à chaque rafraîchissement de la page ou lors d’un clic sur un bouton de rafraîchissement.
Ce script a ses qualités mais présente un double défaut :
- une même variante peut s’afficher deux fois consécutives
- une variante peut ne s’afficher jamais avant le départ du visiteur.
Dans certains cas, on préfère donc que ces variantes soient appelées non pas de façon aléatoire mais l’une après l’autre. Le bouton aurait alors la fonction correspondant à « Suivant ».
Hélas, j’ai parcouru en vain la toile à la recherche de la formule et je n’ai pas le bagage suffisant pour la développer moi-même.
Quelqu’un connaît-il la solution ?

rick38 · 3 Novembre 2018

Puisqu'un rafraîchissement de page fait tout perdre, il faut passer par un cookie pour se souvenir du dernier indice.

donc lire le cookie en récupérant la valeur dans une variable i (à voir comment faire en js), puis :

document.getElementById("Variante").innerHTML=proverbes[++i];

Puis créer/écraser le cookie avec la valeur de i
quelque chose comme :

document.cookie = "nom_du_cookie=" + i + "; path=/";

Faut aussi gérer quand on est à la fin pour que i retourne à 0.

Une autre façon c'est de stocker la liste des valeurs déjà utilisées si on veut garder le mode aléatoire sans afficher deux fois la même chose.

Michel B. · 3 Novembre 2018

Je vous remercie, Rick, pour votre réponse.
J’ai également une alternative, recourant à "toggle" pour afficher/masquer les variantes de sorte qu’une seule soit affichée sur la page.
Voici le code :

Code:

<body>
<div id="V1" class="texte" style="display:block">Il faut manger pour vivre et non vivre pour manger.</div>
<div id="V2" class="texte" style="display:none">À chaque jour suffit sa peine.</div>
<div id="V3" class="texte" style="display:none">Les plaisanteries les plus courtes sont les meilleures.</div>
<div id="V4" class="texte" style="display:none">Tel est pris qui croyait prendre.</div>
<a href="javascript:toggle('V1');">Variante 1</a>
<a href="javascript:toggle('V2');">Variante 2</a>
<a href="javascript:toggle('V3');">Variante 3</a>
<a href="javascript:toggle('V4');">Variante 4</a>
<script type="text/javascript">
function toggle(ele) {
   $(".texte").hide();
   $("#"+ele).show();
}
</script>
<script type="text/javascript" src="../jquery.js"></script>
</body>

Dans ce cas, je me retrouve avec quatre boutons commandant l'affichage de chaque variante. Or, je voudrais n’en conserver alors qu’un seul, avec la valeur « Suivant » et une commande qui le permette.
Mais je rame !

Michel B. · 5 Novembre 2018

Bonjour,
J’ai finalement construit ma Baragouineuse par l’amalgame des deux méthodes : l’affichage aléatoire d’un texte parmi ceux d’une liste non affichée et l’appel nécessaire de ce texte sorti de cette même liste au moyen d’un lien direct.
De la sorte, le visiteur pressé peut soit cliquer sur le bouton « Baragouiner » pour faire rapidement défiler les variantes sans autre déplacement de la main, soit sélectionner le numéro du cas dont il veut voir immédiatement un exemple.
Quant au code, il est réalisé de manière expérimentale. Si quelqu’un voit comment le simplifier ou le nettoyer, je lui en serais reconnaissant.

julien57250 · 5 Novembre 2018

Vous devez sans doute avoir vos raisons mais je ne vois pas vraiment l'intérêt d'utiliser jQuery pour faire ça.

Michel B. · 5 Novembre 2018

julien57250 a dit:
Vous devez sans doute avoir vos raisons mais je ne vois pas vraiment l'intérêt d'utiliser jQuery pour faire ça.

Si vous examinez le code de la page, vous vous apercevrez que les variantes masquées apparaissent « à la demande », c’est-à-dire par appel aléatoire ou par un clic sur les liens numérotés, avec la commande « toggle », laquelle, je pense, est plus courte que le javascript classique.
En tout cas, c’est le script qui m’est tombé sous les yeux et que j’ai pu adapter à mes souhaits. En outre, le fichier jquery est chargé sur mon serveur et appelé par la plupart de mes pages, notamment pour distinguer liens internes (qui s’ouvrent dans la fenêtre du navigateur) et liens externes (qui ouvrent un nouvel onglet).
Bon vent à vous.

rollback · 14 Novembre 2018

oui mais michel, on était habitué aux chemins de traverses.
Quel est la différence sinon entre ces deux phrases:
Utiliser Jquery qui utilise de toutes façons le Javascript, pourquoi s'embêter
Aller chez Ronald qui utilise de toutes façons du boeuf, pourquoi cuisiner

Pourquoi ?????

Michel B. · 15 Novembre 2018

Attendez, Rollback ! C’est moi qui demandais à la communauté WebRankInfo le moyen d’afficher dans un même cadre un texte l’un après l’autre en actionnant un seul bouton, qui remplirait alors la fonction « Suivant », comme dans un diaporama pour les images.
Ignorant la solution, je ne rejetais donc pas à priori tel ou tel moyen qui m’eût été proposé.
Ne me forcez pas à me ranger dans le camp des partisans ou des pourfendeurs de Jquery : je ne suis pas habilité à traiter de la question.
Mais ne me dites pas que je cuisine au rab(el)ais !

rollback · 15 Novembre 2018

merci 10 fois pour ce bon mot du petit déjeuner
c'est devenu rare de converser sur un forum, disons une chance sur 1000
Ça fait quand même 12.5 % de chance

Michel B. · 15 Novembre 2018

On s’en raconte et l’on se compte, on s’en rend compte…
À moi, comte, deux mots !
Et s’il n’en reste qu’un, là, ce sera le bon :
Celui de la faim/fin.