Générer un bouton personnalisé avec javascript (construction d'a

finelarme Messages postés 52 Date d'inscription Statut Membre Dernière intervention -
Anoen Messages postés 196 Date d'inscription Statut Membre Dernière intervention - 16 août 2013 à 14:06

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.

Afficher la suite

A voir également:

Générer un bouton personnalisé avec javascript (construction d'a
Comment faire un tri personnalisé sur excel - Guide
Story personnalisé facebook c'est quoi - Guide
Comment générer un qr code - Guide
Generer mot de passe - Télécharger - Sécurité
Bouton reinitialisation pc - Guide

4 réponses

Réponse 1 / 4

Anoen Messages postés 196 Date d'inscription Statut Membre Dernière intervention 25

Bien sûr que c'est possible. innerHTML est explicite là dessus, tu peux inclure du html.

Il suffit de mettre ton code à la place de réponse (fais attention à bien échapper les ").

Quant au script associé au deuxième bouton, il est préférable que tu l'ai déjà dans la page avant la génération du bouton, donc il ne doit pas être injecté via .innerHTML.

<script type="text/javascript">
 function validateForm() {
 var x = document.forms["form1"]["fname1"].value;
 if (x === "mot" ) {
  document.forms["form1"].innerHTML +=("
<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>
");   
 } return false; }
  document.forms["form1"].onsubmit = validateForm;
</script>

Pour le textaerea, tu peux le définir oui. Soit au clic sur un bouton, soit en surveillant le texte marqué avec .onkeyup (qui enregistre tous les évènements du clavier)

Tu peux chercher ensuite, une phrase/mot en récupérant les données avec .value() et en la comparant à la chaîne que tu veux avec .match ou .search

Réponse 2 / 4

finelarme Messages postés 52 Date d'inscription Statut Membre Dernière intervention 2

Merci beaucoup pour ton aide précieuse.

J'ignorais qu'il fallait retirer les guillements, merci pour ce conseil.

Je vais me renseigner sur ce .onkeyup , .value() , .match et .search parce que je ne comprends pas du tout ce que c'est, je suis plus que novice.

Réponse 3 / 4

finelarme Messages postés 52 Date d'inscription Statut Membre Dernière intervention 2

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".

Réponse 4 / 4

Anoen Messages postés 196 Date d'inscription Statut Membre Dernière intervention 25

Ca revient à ce que je t'ai dit au-dessus, .onkeyup t'aidera à le faire. Voici le code général pour t'aider à comprendre :

 window.onload = function() {
        var myInput= document.getElementById("toninput");

        myInput.onkeyup = function(event) { //Détecte une touche pressée dans l'input
           var val = myInput.value;
           
           //Si 1 on affiche le bouton
           if(val === "1"){
               document.forms["form1"].innerHTML +=("<span id=\"btn1\"><a href =\"1.html\" target=\"_self\"><input type=\"button\" value=\"1\"></a></span>"); 
           }
           //Si 2 on regarde si le bouton existe déjà dans la page (au cas où on écrirait 2 directement) et on l'efface
           else if (val === "2"){
              var btn = document.getElementById("toninput");
               if( btn !== undefined){
                   btn.innerHTML = "";
               }
          }
        };
    };

J'ai entouré ton bouton avec un span pour pouvoir le cibler et effacer son contenu. C'est un code de tête, j'ai pas testé mais ça devrait fortement ressembler à ça.

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

Quel est la touche shift sur le clavier

Bouton ON OFF, O ou I ?

java script error in the main process

Votre réponse

Discussions similaires