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

**Finelarme** · 12/08/2013, 14h42

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.

**SylvainPV** · 13/08/2013, 00h03

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");

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager