Partage
  • Partager sur Facebook
  • Partager sur Twitter

Changer la largeur d'un div depuis un js

    25 octobre 2016 à 22:57:54

    Bonsoir,

    J'ai un problème, que je n'arrive pas à résoudre par moi-même (étant débutante en js/html).

    Je souhaite créer une barre de progression d'énergie, originellement rempli à 100% et qui se vide progressivement selon une variable (var energy) issue de mon code javascript. Elle est accompagnée d'un bouton "+ energy" qui ajoute 10% à chaque fois qu'on clique dessus.

    J'ai d'abord utilisé <progress> mais cela n'a rien donné. J'ai donc créé un <div class=progressbar style="width:100px"> dans mon html,  je l'ai coloré en noir dans mon css. 

    Je souhaite que sa largeur soit égale à energy. 

    Cependant je n'arrive pas à modifier la largeur de mon div selon cette variable. Quelqu'un pourrait-il m'aider ?

    SOS

    Merci d'avance ! 

    -
    Edité par LRoilleux 25 octobre 2016 à 22:58:20

    • Partager sur Facebook
    • Partager sur Twitter
      26 octobre 2016 à 0:55:13

      Salut,

      un exemple tout simple : http://codepen.io/EmmanuelBeziat/pen/ixHma 

      • Partager sur Facebook
      • Partager sur Twitter

      Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

        26 octobre 2016 à 8:56:06

        Bonjour,

        Il a dit simple le monsieur :p

        Je t'ai fait un petit truc très simple ;) :

        https://jsfiddle.net/Krogoth/o5e76nvz/

        • Partager sur Facebook
        • Partager sur Twitter
        Un petit +1 si je vous ai aidé est toujours appréciable :).
          26 octobre 2016 à 14:57:44

          Attention à faire en sorte que la taille ne puisse pas aller au-delà de 100% du coup.
          • Partager sur Facebook
          • Partager sur Twitter

          Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

          Changer la largeur d'un div depuis un js

          × 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