Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JS] interaction

momo33
    19 juin 2006 à 0:37:46

    Bonjour, je début en Javascript et après avoir lu un tuto j'aimerais faire un quelque chose de spéciale.
    J'explique l'utilisateur choisi un légume, ça luis affiche le prix et ça luis met un case pour rentrer le nombre qu'il en veut. Quant il rentre cette valeur il faut que ça calcul, mais ça je le ferais après pour l'instant je veux juste récupérer la valeur.


    j'ai commencer le code mais il ne marche pas :-°

    <script language="JavaScript"><!--
    function affiche(nom){
    document.write('Les '+nom+' son bonnes. t\'en vu combiens? 1 = 5€ ');
    document.write('<FORM>    <input id="nb" name="nb" size="6" onKeypress="nb_rentre('value');"/></FORM>');//la je voudrer récuppérer la valeur qui a dans le imput

    }
    function nb_rentre(quant) {// etla je m'en sert
    document.write('le chiffre'+quant+' a été rentré');
    }
    -->
    </script>

    <INPUT type="button" value="patate" onClick="affiche('patate');">
    <INPUT type="button" value="carotte" onClick="affiche('carotte');">


    Merci d'avance pour votre aide :)
    • Partager sur Facebook
    • Partager sur Twitter
    MKBB
      19 juin 2006 à 6:07:13

      Salut, je ne m'y connait pas trop trop en js, mais je vois deja 2 trucs:
      - Deja le input que tu crée dans ta fonction affiche, il faut que tu declare le type non ? ( type="text")
      - et je crois que quand tu appelle une fonction sur un onclick je crois qu'il faut rajouter onclick="javascript:ta_fonction();"
      - Dans tes document.write, quand tu veux déspécialiser une apostrophe faut mettre un \ devant:
      document.write('<FORM><input id="nb" name="nb" size="6" onKeypress="nb_rentre('value');"/></FORM>');

      document.write('<FORM><input id="nb" name="nb" size="6" onKeypress="nb_rentre(\'value\');"/></FORM>');


      ou alors n'oublie pas les + si tu fais de la concaténation:

      document.write('<FORM><input id="nb" name="nb" size="6" onKeypress="nb_rentre('+value+');"/></FORM>');



      Et si j'ai bien compris tu veux que ton utilisateur rentre un nombre dans un champs et que en fonction de ce nombre tu affiche qqch, le probleme c'est que si tu utilise la fonction onKeypress je suis pas sur que tu puisse rentrer un nombre a plusieurs chiffres (enfin ça je sais pas si tu le voulais ou pas), eventuellement rajoute un petit bouton valid a coté :D

      J'espere que ça t'auras aidé un peu ;)
      • Partager sur Facebook
      • Partager sur Twitter
      shuss
        19 juin 2006 à 13:52:01

        Tu sais quoi, on va tout recommencer !

        Voila un script plus correct :
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
                <head>
                        <title>Bienvenue sur mon site !</title>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                </head>
                <body>
                        <script language="JavaScript">
                                <!--
                                function affiche(liste)
                                        {
                                        // on vérifie si il éxiste déjà un label, et on le supprime
                                        if (document.getElementById('quantite') != null)
                                                {
                                                liste.form.removeChild(document.getElementById('quantite'));
                                                }
                                        //on récupère le div pour placer le label
                                        var div = document.getElementById('prix');
                                        //on crée le label, le input et le texte
                                        var label = document.createElement('label');
                                        label.setAttribute('id', 'quantite');
                                        var texte = document.createTextNode('les ' + liste.value + ' sont bonnes ! T\'en veux combien ? (5€ l\'unité)');
                                        var input = document.createElement('input');
                                        input.setAttribute('type', 'text');
                                        input.setAttribute('name', 'quantite');
                                        input.addEventListener('keyup', nb_rentre, true);
                                        label.appendChild(texte);
                                        label.appendChild(input);
                                        //et on insère tout ça
                                        liste.form.insertBefore(label, div);
                                        }
                                function nb_rentre()
                                        {
                                        var div = document.getElementById('prix');
                                        //si le texte éxiste déjà, on le supprime
                                        if (div.firstChild != null)
                                                {
                                                div.removeChild(div.firstChild);
                                                }
                                        //si l'utilisateur à tapé n'importe quoi, on écrit ...
                                        if (isNaN(this.value))
                                                {
                                                var texte = document.createTextNode('Je n\'ai pas compris, là !');
                                                }
                                        //si il a écrit un nombre ...
                                        else if (this.value != 0)
                                                {
                                                var texte = document.createTextNode('Ca vous fera ' + (parseInt(this.value) * 5) + '€.');
                                                }
                                        //si il y a quelque chose dans le champs, on place la phrase
                                        if (this.value != 0)
                                                {
                                                div.appendChild(texte);
                                                }
                                        }
                                -->
                        </script>
                        <form>
                                <select name="legume" onchange="javascript:affiche(this);">
                                        <option value="patate">patate</option>
                                        <option value="carotte">carrotte</option>
                                </select>
                                <div id="prix"></div>
                        </form>
                </body>
        </html>


        Déjà, j'ai mis une liste déroulant, qui est plus simple à utiliser. Le div sert à placer le texte. Pour les fonctions JS, j'ai mis des commentaires.

        Dis-moi si t'as des problèmes avec, mais les document.write, ça fait vraiment brouillon, et ça efface tout (l'utilisateur ne peut pas changer ses choix).
        • Partager sur Facebook
        • Partager sur Twitter
        momo33
          19 juin 2006 à 14:11:18

          Super merci a vous deux surtout a shuss, ton code est nikel :D J'ai juste a l'adapter pour mon site :)
          J'ai juste un petit problème comment faire si au lieu d'une liste déroulente j'ai des lien chaccun dans une case d'un tableau??
          • Partager sur Facebook
          • Partager sur Twitter
          shuss
            19 juin 2006 à 16:07:34

            Ba, au lieu de mettre dans ton <select> onchange="javascript:affiche(this);", tu mets sur chaque lien onclick="javascript:affiche('patate');". Par contre, il va falloir que tu retrouve la liste déroulant (donne un id à ta liste), et que tu modifie un peu le code.
            C'est pour ça que j'ai mis une liste déroulante, c'est plus pratique à utiliser.

            Mais je te conseille fortement de garder la liste déroulante : il y en a qui ne peuvent/veulent pas activer JavaScript. Donc il faut que ça soit PHP qui traite le tout. Avec cette méthode, PHP pourra récupérer le légume choisit. Pour qu'ils puissent l'utiliser en totaliter, rajoute dans le formulaire
            <noscript>
                <input type="text" name="quantite_noscript"/>
            </noscript>

            De cette façon, ceux qui ont désactivé JavaScript auront une zone de saisie que PHP récupèrera dans $_POST['quantite_noscript'].

            Et aussi, IE ne gère pas addEventListener, regarde sur google pour trouver son équivalent.
            • Partager sur Facebook
            • Partager sur Twitter
            momo33
              19 juin 2006 à 17:07:48

              Alors j'ai eu l'idée de faire une liste a choix multiple qui me plait plus pour mon site.

              J'ai mis :
                                   <select multiple="multiple" size="12" onClick="javascript:affiche(this);">
                                                        <option value="patate">patate</option>
                                    <option value="carotte">carrotte</option>
                                                       </select>


              Mais j'ai maintenant 2 problèmes :
              - Comment enlever la scollbar de gauche?
              - Le script ne marche pas sous IE :(

              Encors merci pour votre aide :D
              • Partager sur Facebook
              • Partager sur Twitter
              shuss
                19 juin 2006 à 17:18:35

                Citation : shuss

                Et aussi, IE ne gère pas addEventListener, regarde sur google pour trouver son équivalent.


                Ca, c'est réglé ...


                Et pour enlever la barre de défilement, c'est du CSS : regarde ici, ça doit être overflow
                • Partager sur Facebook
                • Partager sur Twitter
                momo33
                  20 juin 2006 à 12:16:58

                  Merci beaucoup de votre aide :D
                  J'avance mais j'ai encors un petit pbloblème ^^
                  Commment faire pour afficher une image car ce code ne marche pas?

                  <script language="JavaScript"><!--
                  function affiche(nom){
                  var div = document.getElementById('prix');
                  var texte =document.createImgNode('<img src="./bhouf.gif" >');
                  div.appendChild(texte);

                  }
                  -->
                  </script>


                  J'ai une div avec l'id="prix"
                  • Partager sur Facebook
                  • Partager sur Twitter
                  shuss
                    20 juin 2006 à 13:48:19

                    Citation : momo33

                    Merci beaucoup de votre aide :D
                    J'avance mais j'ai encors un petit pbloblème ^^
                    Commment faire pour afficher une image car ce code ne marche pas?

                    <script language="JavaScript"><!--
                    function affiche(nom){
                    var div = document.getElementById('prix');
                    var texte =document.createImgNode('<img src="./bhouf.gif" >');
                    div.appendChild(texte);

                    }
                    -->
                    </script>



                    J'ai une div avec l'id="prix"



                    Mort de rire, j'adors ton code !
                    Sinon, createTextNode ne marche que pour créer un texte, qui est un élèment spécial de l'HTML (on peut pas y appliquer directement du CSS, ni mettre un id ...).
                    Pour TOUT autre élément, il s'agit de document.createElement('balise'), où tu remplace balise par le type de balise (ici img). Ensuite, il faut définir des attributs, avec texte.setAttribute('src', 'image.jpg'); et texte.setAttribute('alt', 'image');.

                    Sinon, pour pas s'embetter, il existe la méthode avec innerHtml, ou un nom come ça (div.innerHtml('<img src="image.jpg" alt="image"/>');), mais ça ne marche pas avec IE, et c'est un code moins ... beau !


                    Pour vérifier quelle ligne ne marche pas, mets des alert('bonjour'); : si bonjour s'affiche, le code marche jusqu'ici, sinon, il y a une erreur avant (ou une grosse erreur de syntaxe quelquepar, comme un } oublié).
                    • Partager sur Facebook
                    • Partager sur Twitter
                    momo33
                      20 juin 2006 à 14:48:42

                      Ok
                      Apres réflexion j'ai trouver que le mieu serrai de faire afficher (ou cacher) des partie de ma page compris entre des div. Ce qui régleré tous mes problèmes d'images...

                      Em plus ca marche sous IE ! Le pied !!!! :D
                      Encors merci pour ton aide car ce que tu ma donné pourra toujours me servir autre part^^
                      • Partager sur Facebook
                      • Partager sur Twitter

                      [JS] interaction

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                      • Editeur ●
                      • Markdown