IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Générer un bouton personnalisé avec javascript (construction d’aventure textuel)


Sujet :

JavaScript

Vue hybride

Finelarme Générer un bouton... 12/08/2013, 14h42
SylvainPV Bonjour, Oui bien sûr... 13/08/2013, 00h03
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 44
    Par défaut Générer un bouton personnalisé avec javascript (construction d’aventure textuel)
    Bonjour,

    J’ai deux questions :

    En envoyant "mot" je reçois le texte « reponse ».

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <form name="form1" method="post">
      <textarea name="fname1" value=""></textarea><br>
    <input type="submit" value="send"></form> 
     
    <script type="text/javascript">
    	function validateForm() {
    	var x = document.forms["form1"]["fname1"].value;
    	if (x === "mot" ) {
    		document.forms["form1"].innerHTML +=("reponse");   
    	} return false; }
    		document.forms["form1"].onsubmit = validateForm;
    </script>
    -> Mais j'aimerais recevoir ce bouton ci-dessous (et le script associé) a la place de « reponse » :

    Code : 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
    <div id="1">
    <input type="button" onClick="return toggleMe('2')" value="vers 2"></div>
    <div id="2" style="display: none;">
    2
    <input type="button" onClick="return toggleMe('3')" value="vers 3"></div>					  
    <div id="3" style="display: none;">
    3
    <input type="button" onClick="return toggleMe('4')" value="vers 4"></div>  
    <div id="4" style="display: none;">
    4 etc
    </div>
     
    //in <head>
     
    <script type="text/javascript">
    function toggleMe(a){
      var next=document.getElementById(a);
      var b=new String();
      b= a-1;
      var prev=document.getElementById(b);
      if(!next)return true;
      if(next.style.display=="none"){
        next.style.display="block"
        prev.style.display="none"
        window.scrollTo(0,0);
      } else {
        next.style.display="none"
      }
      return true;
      }
    </script>
    -> Est-il d'ailleurs possible de definir le bouton qui s'affichera en fonction de ce qu'on ecrira dans le text area ci-dessus ?

    Merci pour l’aide apportée.

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    Bonjour,

    Oui bien sûr c'est possible, en revanche ce n'est pas forcément la meilleure approche. Si dans ton "aventure textuelle" tu es amené à avoir des dizaines voire des centaines de boutons différents, il vaut mieux les générer dynamiquement au lieu de tous les écrire dans ton HTML.

    Je t'ai fait un exemple simpliste qui permet de gérer plusieurs "états" ou "scènes" d'un scénario. A chaque état on écrit un texte et génère un nombre variable de boutons d'actions. Ce n'est peut-être pas ce que tu veux mais ça te donnera sûrement quelques pistes pour avancer.

    http://jsfiddle.net/CYVCT/1

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div id="game">
        <p id="texte"></p>
        <ul>
        </ul>
    </div>

    Code : 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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    var GameStates = {
        "debut": {
            texte: "Début",
            actions: {
                "milieu1": "Choix numéro 1",
                "milieu2": "Choix numéro 2",            
            }            
        },
        "milieu1": {
            texte: "Scène 1",
            actions: {
                "milieu2": "Action 1",
                "debut": "Action 2",
                "gagne": "Action 3",
            }            
        },
        "milieu2": {
            texte: "Scène 2",
            actions: {
                "milieu1": "Bouton 1",            
                "gameover": "Bouton 2",
            }            
        },
        "gameover": {
            texte: "Perdu",
            actions: {            
                "debut": "Recommencer",            
            }            
        },
        "gagne": {
            texte: "Gagné",
            actions: {
                "debut": "Recommencer",
            }            
        },    
    };
     
    var currentState;
     
    function afficherEtape(etape){
        currentState = GameStates[etape];
        document.getElementById("texte").textContent = currentState.texte;
        var listeActions = document.querySelector("#game ul");
        listeActions.innerHTML=""; //vide la liste précédente
        for(var action in currentState.actions){
            var li = document.createElement("li");
            var bouton = document.createElement("input");
            bouton.setAttribute("type", "button");        
            bouton.value = currentState.actions[action];
            bouton.onclick = (function(){
                afficherEtape(this);
            }).bind(action);
            li.appendChild(bouton);
            listeActions.appendChild(li);
        }
    }
     
    afficherEtape("debut");

Discussions similaires

  1. Donner une valeur de bouton HTML avec Javascript
    Par xlink dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 03/12/2014, 10h03
  2. Création d'un bouton personnalisé avec QGraphicsItem
    Par sniper5g08 dans le forum Débuter
    Réponses: 8
    Dernier message: 28/04/2010, 17h29
  3. Générer un tableau associatif avec javascript
    Par beegees dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 10/04/2010, 10h59
  4. Bouton personnalisé avec un comportement bizarre
    Par laedit dans le forum Windows Presentation Foundation
    Réponses: 1
    Dernier message: 22/04/2009, 04h01
  5. changer le style d'un bouton submit avec du javascript
    Par ipeteivince dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 08/08/2006, 15h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo