11497 sujets

JavaScript, DOM et API Web HTML5

Générer un bouton personnalisé avec javascript (construction d’aventur

Bonjour,

J’ai deux questions :

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

<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é) à la place de « reponse » : 

<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.
Modifié par Finelarme (12 Aug 2013 - 15:34)
Il y a plusieurs façon de faire, la plus rapide al tout de suite ca serait de chargr les boutons dans la page dès le début, mais de les masquer par défaut. Une fois le submit envoyé, tu affiches ta div contenant les boutons.

Et oui, tu peux définir quel bouton s'affiche selon le mot écrit dans le textarea. La aussi plusieurs façons de faire, la plus rapide étant d’appeler ta fonction toggleMe avec un paramètre choisis selon le mot entré.
Merci.

J'ai fait ceci, c'est presque ce que je voulais mais je m'en contenterai :

<script type="text/javascript">
 function validateForm() {
 var x = document.forms["form1"]["fname1"].value;
 if (x === "1" ) {
  document.forms["form1"].innerHTML +=("<a href =\"1.html\" target=\"_self\"><input type=\"button\" value=\"1\"></a>"); 
   } if (x === "2" ) {
  document.forms["form1"].innerHTML +=("<a href =\"2.html\" target=\"_self\"><input type=\"button\" value=\"2\"></a>"); 

 } return false; }
  document.forms["form1"].onsubmit = validateForm;
</script>


Cependant j'aimerais que lorsque le joueur écrit "1" le bouton s'affiche et s'efface lorsque qu'il écrit "2".
Modifié par Finelarme (12 Aug 2013 - 20:21)
Dans ton form, crée une div avec un id bien précis. Ensuite dans ton script, tu en effaces le contenu dès le début, puis tu la remplis avec le contenu que tu veux.


function validateForm() {
var x = document.forms["form1"]["fname1"].value;
[b]var div = document.querySelector('#id-de-ta-div');
div.innerHTML = '';[/b]
if (x === "1" ) {
    [b]div.innerHTML[/b]  = 'le code pour ton bouton 1';

...etc


Aussi, c'est pas très propre comme façon de faire. Mais bon.
Sujet clos
Aller à