Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème JQuery

    17 juin 2019 à 21:28:14

    Bonjour, j'essaye de coder quelque chose où quand on rentre le caractère "+" dans un input , ça grandi la longueur et la largeur d'une div. J'essaye de faire ça avec Jquery (et bien évidemment html, css et JS...) mais je ne comprends pas pourquoi ça ne marche pas..

    Voici mon js (pardon si ce n'est pas très bien organisé je débute!..):

    $(document).ready(function(){       

            var divWidth = 1;

            var divHeigth = 1;

                $("input").keypress(function(e){

                var touche = String.fromCharCode(e.which);

                if (touche === "+"){

                    divHeigth++;

                    divWidth++;

                };

            }) 

                function div(){

                    $("div").css('width', divWidth );

                    $("div").css('heigth', divHeigth );

                }

                    setInterval(div , 15);

        })

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 18 juin 2019 à 10:32:37

      Bonjour,

      Mauvais forum

      Le sujet est déplacé de la section Discussions développement vers la section Javascript

      Merci d'utiliser la balise code Image

      Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Image de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

      -
      Edité par Benzouye 18 juin 2019 à 10:32:54

      • Partager sur Facebook
      • Partager sur Twitter
      Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL
        18 juin 2019 à 13:07:57

        Salut,

        Pour moi la partie du code avec le width fonctionne.

        Mais pas le height, le mot n'est pas écrit correctement, attention, c'est "height" et non "heigth".

        Pour tes selecteur jquery il fonctionne mais je te conseille d'utiliser des id ou class pour les identifier. $('div') ou $('input') c'est pas fous =), mais ça marche.

        Exemple corrigé:

        HTML

        <input class="my-input" type="text">
        <div class="my-div" style="border: black solid 1px;">Ma div</div>

        JS

        $(document).ready(function(){       
                var divWidth = 1;
                var divHeight = 1;
                    $(".my-input").keypress(function(e){
                    var touche = String.fromCharCode(e.which);
                    if (touche === "+"){
                        divHeight++;
                        divWidth++;
                    };
                }) 
        
                function div(){
                // Je te conseille de ne pas utiliser 2 fois le même selecteur, si tu peux t'en passer =)     
                   $(".my-div").css('width', divWidth );
                   $(".my-div").css('height', divHeight );
                }
                setInterval(div , 15);
        
            })



        -
        Edité par Benzouye 18 juin 2019 à 13:25:30

        • Partager sur Facebook
        • Partager sur Twitter
          18 juin 2019 à 19:12:02

          Bonjour RaphaelCassard1

          Pour moi, tu n'as pas a faire de setInterval

          $(document).ready(function(){       
            var divWidth = 1;
            var divHeight = 1;
            $(".my-input").keypress(function(e){
              var touche = String.fromCharCode(e.which);
              if (touche === "+"){
                divHeight++;
                divWidth++;
              };
              div();
            }) 
          
            function div(){
              // Je te conseille de ne pas utiliser 2 fois le même selecteur, si tu peux t'en passer =)     
              $(".my-div").css('width', divWidth );
              $(".my-div").css('height', divHeight );
            }
          })



          • Partager sur Facebook
          • Partager sur Twitter
          Découvrez les Css avec la zonecss.fr
            19 juin 2019 à 13:27:58

            Merci beaucoup pour vos réponses, j'ai tout corrigé et cela ne marchait pas.. J'ai fais par la suite un copié coller de vos réponse mais  toujours sans effet... Je suis perdu :,(

            • Partager sur Facebook
            • Partager sur Twitter
              Staff 19 juin 2019 à 13:36:07

              Montre nous ton code, les erreurs, le résultat...

              Sans précision, personne ne pourra t'aider...

              • Partager sur Facebook
              • Partager sur Twitter
              Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL
                19 juin 2019 à 15:14:54

                html:

                <!DOCTYPE html>

                <html>

                    <head>

                        <link href="style.css" rel="stylesheet">

                        <script src="script.js"></script>

                        <script src="Jquery/jquery-3.4.1.min.js"></script>

                    </head>

                    <body>

                     <input class="my-input">

                     <div class="my-div"></div>

                    </body>

                </html>

                css :

                div

                {

                    background-color: black;

                    width: 1px;

                    height: 1px;

                    margin: auto;

                    position: absolute;

                    right: 0;

                    left: 0;

                    top: 0;

                    bottom: 0;

                }

                label

                {

                    width: 200px;

                }

                javascript/jquery:

                $(document).ready(function(){       

                      var divWidth = 1;

                      var divHeight = 1;

                      $(".my-input").keypress(function(e){

                        var touche = String.fromCharCode(e.which);

                            if (touche === "+"){

                              divHeight++;

                              divWidth++;

                            };

                        div();

                      }) 

                      function div(){

                        $(".my-div").css('width', divWidth );

                        $(".my-div").css('height', divHeight );

                  }

                })


                • Partager sur Facebook
                • Partager sur Twitter
                  Staff 19 juin 2019 à 15:22:54

                  Bonjour,

                  Merci de colorer votre code à l'aide du bouton Code

                  Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

                  Mauvais titre

                  Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

                  Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

                  De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

                  Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

                  Pour modifier votre titre, éditez le premier message de votre sujet.

                  (titre originel : Problème JQuery)

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                    19 juin 2019 à 18:15:58

                    Bonjour RaphaelCassard1,

                    C'est ta css qui bloque ton bottom et right.

                    Tu as défini les 4 coins (top, left , right, bottom) dans ce cas width et height sont ignorés

                    • Partager sur Facebook
                    • Partager sur Twitter
                    Découvrez les Css avec la zonecss.fr

                    Problème JQuery

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    • Editeur
                    • Markdown