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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Michel B., 3 Novembre 2018.

  1. Michel B.
    Michel B. Nouveau WRInaute
    Inscrit:
    19 Janvier 2008
    Messages:
    33
    J'aime reçus:
    1
    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 ?
     
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 186
    J'aime reçus:
    141
    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.
     
    #2 rick38, 3 Novembre 2018
    Dernière édition: 3 Novembre 2018
  3. Michel B.
    Michel B. Nouveau WRInaute
    Inscrit:
    19 Janvier 2008
    Messages:
    33
    J'aime reçus:
    1
    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 !
     
  4. Michel B.
    Michel B. Nouveau WRInaute
    Inscrit:
    19 Janvier 2008
    Messages:
    33
    J'aime reçus:
    1
    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.
     
  5. julien57250
    julien57250 Nouveau WRInaute
    Inscrit:
    17 Janvier 2012
    Messages:
    15
    J'aime reçus:
    0
    Vous devez sans doute avoir vos raisons mais je ne vois pas vraiment l'intérêt d'utiliser jQuery pour faire ça.
     
  6. Michel B.
    Michel B. Nouveau WRInaute
    Inscrit:
    19 Janvier 2008
    Messages:
    33
    J'aime reçus:
    1
    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.
     
  7. rollback
    rollback WRInaute occasionnel
    Inscrit:
    5 Novembre 2018
    Messages:
    461
    J'aime reçus:
    49
    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 ?????
     
  8. Michel B.
    Michel B. Nouveau WRInaute
    Inscrit:
    19 Janvier 2008
    Messages:
    33
    J'aime reçus:
    1
    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 !
     
  9. rollback
    rollback WRInaute occasionnel
    Inscrit:
    5 Novembre 2018
    Messages:
    461
    J'aime reçus:
    49
    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
     
  10. Michel B.
    Michel B. Nouveau WRInaute
    Inscrit:
    19 Janvier 2008
    Messages:
    33
    J'aime reçus:
    1
    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.
     
Chargement...
Similar Threads - script Remplacer mode Forum Date
Remplacer du javascript par du html Problèmes de référencement spécifiques à vos sites 14 Novembre 2012
Script slideshow pour remplacer celui de wordpress Développement d'un site Web ou d'une appli mobile 18 Janvier 2010
Description sur Pinterest pas affichée Autres réseaux sociaux Vendredi à 22:02
WordPress Description de produits similaire Rédaction web et référencement 23 Octobre 2019
WordPress Annuaire avec fiche d'inscription différente par type d'inscrits Développement d'un site Web ou d'une appli mobile 7 Octobre 2019
Référencement d'un site full javascript (angular js) Référencement Google 10 Septembre 2019
Meta description Yoast Seo non reprise par Google Référencement Google 8 Septembre 2019
Balisage sémantique itemprop name / description multilingue Référencement Google 26 Juillet 2019
[Google shopping] Erreur "description" dans diagnostic du module "google merchant center pro" e-commerce 26 Juillet 2019
Problème de description dans les serps Problèmes de référencement spécifiques à vos sites 19 Juillet 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice