Bouton compteur

Signaler
Messages postés
3
Date d'inscription
vendredi 9 octobre 2020
Statut
Membre
Dernière intervention
10 octobre 2020
-
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
-
Bonjour, J'aurais deux question par rapport a un bouton cliquable qui affiche le nombre de clics. je vais vous mettre le code du compteur et de son bouton reset.

 <div class="main" style=";width: 150px; margin-left: auto;
  margin-right: auto;">

 
    <button id="clickme" style="height: 150px;width: 150px;border-radius: 75px;border: none;background: #92c7eb;cursor:pointer;"> 0</button>


  </div>

 
<script>

var button = document.getElementById("clickme"),
  count = 0;
button.onclick = function(e) {
  count += 1;
  button.innerHTML = " " + count;
};

</script>



et voici le code de mon bouton reset

 

</a><button id ="reset" 
onclick="javascript:reset()" class="btn" style="vertical-align:middle"></button>

 <script type="text/javascript">
   var reset= function(){
    a = 0;
    document.getElementById('clickme').innerHTML = a;
    }
</script>      
       



Le problème c'est que le bouton reset remet a zéro mais quand je clique sur le bouton il reprends au chiffre ou il s'est arrêter.
J'ai du toucher qqch parce qu'avant sa marchais normalement.

Et le deuxieme souci c'est que j'ai besoin de se bouton plusieurs fois sur la meme page, mais que j'en met deux un seul fonctionne, pourtant j'ai modifier les bouton et les id.

Voila je n'arrive pas à trouver de solution. Je vous remercie d'avance pour votre aide.




Configuration: Windows / Firefox 81.0

3 réponses

Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
2 852
Bonjour,

Tu as oublié, dans ton reset, de mettre la variable count à zéro.
Mais on peut faire autrement... juste remettre le innerHTML du bouton à zéro et utiliser le code suivant pour faire tes boutons de vote
<html>
  <head>
    <title>TEST</title>
    <meta charset="utf-8"/>
    <style>
       div.main{
         width: 150px; 
         margin-left: auto; 
         margin-right: auto;
       }
       
      .btn-vote{
        height: 150px;width: 150px;
        border-radius: 75px;
        border: none;
        background: #92c7eb;
        cursor:pointer;
      }
    </style>
  </head>
  <body>
    <div class="main">
   
      <button id="clickme" class="btn-vote js-btn-vote"> 0</button>
      <button id="clickme2" class="btn-vote js-btn-vote"> 0</button>
      <button id="clickme3" class="btn-vote js-btn-vote"> 0</button>

    </div>

     
    <script>
    // on récupère tous les bouton ayant la class  js-btn-vote
    var buttons = document.getElementsByClassName('js-btn-vote');
    
    // pour chaque bouton, on gère le onclick
    for(let i=0; i<buttons.length;i++){
      buttons[i].onclick = function(e){
        this.innerHTML = parseInt(this.innerHTML) + 1;
      }
    }

    </script>

  </body>
</html>


Messages postés
3
Date d'inscription
vendredi 9 octobre 2020
Statut
Membre
Dernière intervention
10 octobre 2020

Merci ça fonctionne mais j'ai un autre soucis le bouton reset ne fonctionne que pour un bouton.

J'ai insérer ce code dans une section pour pc seulement.
<html>
  <head>
    <title>TEST</title>
    <meta charset="utf-8"/>
    <style>
       div.main{
         width: 150px; 
         margin-left: auto; 
         margin-right: auto;
       }
       
      .btn-vote{
        height: 150px;width: 150px;
        border-radius: 75px;
        border: none;
        background: #92c7eb;
        cursor:pointer;
      }
    </style>
  </head>
  <body>
    <div class="main">
   
      <button id="clickme" class="btn-vote js-btn-vote"> 0</button>
      
 
  </div>
     
    <script>
    // on récupère tous les bouton ayant la class  js-btn-vote
    var buttons = document.getElementsByClassName('js-btn-vote');
    
    // pour chaque bouton, on gère le onclick
    for(let i=0; i<buttons.length;i++){
      buttons[i].onclick = function(e){
        this.innerHTML = parseInt(this.innerHTML) + 1;
      }
    }
    
    </script>
    
    <script type="text/javascript">
   var reset= function(){
    a = 0;
    document.getElementById('clickme').innerHTML = 0;
    }
</script>      

</a><button id ="reset" 
onclick="javascript:reset()" class="btn" style="vertical-align:middle"></button>


</body>
</html>



le bouton reset fonctionne bien.
Par contre pour la section dedié aux mobiles/tablettes
le bouton reset ne fonctionne pas. Voici le code

 </div>
  <div> 
  <button id="clickme2" class="btn-vote js-btn-vote"> 0</button>
  </div>
     
    <script>
    // on récupère tous les bouton ayant la class  js-btn-vote
    var buttons = document.getElementsByClassName('js-btn-vote');
    
    // pour chaque bouton, on gère le onclick
    for(let i=0; i<buttons.length;i++){
      buttons[i].onclick = function(e){
        this.innerHTML = parseInt(this.innerHTML) + 1;
      }
    }
    
    </script>
    
      
    <script type="text/javascript">
   var reset= function(){
    a = 0;
    document.getElementById('clickme').innerHTML = 0;
    }
</script>      

</a><button id ="reset" 
onclick="javascript:reset()" class="btn" style="vertical-align:middle"></button>
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
2 852
Je ne comprends pas....
Tu nous as dit que tu allais avoir plusieurs boutons sur la même page....
Là, maintenant, tu nous parles de "section" pour PC et pour mobiles/tablettes .... qu'est-ce que tu appelles "section" ??
Les deux codes que tu nous montres sont dans le même fichier ????
Si oui, pourquoi avoir "dupliqué" mon code JS ??? Sais tu ce que sont les "fonctions" et comment ça marche ???
Comprends tu le code que je t'ai donné ??
Comprends tu le code que tu as essayé d'écrire ?? ( j'en doute, sinon ton reset pointerait sur le bon id... )

Pour en revenir à tes "sections" .... ne me dis pas que tu "dupliques" ton code html pour gérer le cas où tu es sur PC et celui où tu es sur mobile ....
Je t'invite à te renseigner sur ce qu'est le responsive design ... et pour t'y aider, à l'utilisation, par exemple, d'un framework css tel que bootstrap.
Messages postés
3
Date d'inscription
vendredi 9 octobre 2020
Statut
Membre
Dernière intervention
10 octobre 2020

Enft j'utilise wordpress, precisement elementor (qui est une constructeur de page en glisser-déposer) pour construire mes pages.
Et sur une page je peux inserer plusieurs elements, comme des sections, des titre des balise de code html, des bouton etcc.
Et pour chaque éléments je peux choisir si je veux le masquer sur pc mobile etc
Pour ce qui est du code je ne le comprends pas entierment enft je suis nul en javascript, j'ai pas encore commencer a apprendre je veux d'abord terminer mon site vu que j'ai juste besoin de ces compteur.

Pour ce qui est du code j'ai creer deux section sur la meme page, la première pour les pc et la deuxieme pour les mobile. Ensuite je masque la premiere section pour mobile et tablette et je masque la deuxieme pour les ordinateur.Voici une vidéo qui explique ce que je fais.
https://www.youtube.com/watch?v=D0-km8-7bHM

Le soucis c'est que quand je met le bouton dans une autre section il ne fonctionne pas.
Messages postés
29754
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 octobre 2020
2 852
Ah la la la..... utiliser des outils sans savoir comment ils fonctionnent en réalité... ce n'est pas le top...

Mais bon,
Si ton bouton doit être présent sur PC ET sur Tablette ..... place le dans une "section" qui ne sera pas masquée ( ni sur tablette , ni sur PC )..
Comme ça.. plus de soucis...

Et si vraiment tu veux continuer à bosser comme tu le fais ( je ne vais pas avoir le temps ( ni l'envie...) de te former à la création de sites web... ) dans ce cas continue à "dupliquer" tes contenus html dans tes "sections" ... mais ne duplique pas le code Javascript !

<html>
  <head>
    <title>TEST</title>
    <meta charset="utf-8"/>
    <style>
       div.main{
         width: 150px; 
         margin-left: auto; 
         margin-right: auto;
       }
       
      .btn-vote{
        height: 150px;width: 150px;
        border-radius: 75px;
        border: none;
        background: #92c7eb;
        cursor:pointer;
      }
    </style>
  </head>
  <body>
    <div class="main">
   
      <button id="btnPC" class="btn-vote js-btn-vote"> 0</button>
      
      <button id ="resetPC" onclick="reset('PC')" class="btn" style="vertical-align:middle">RESET PC</button>
      
      
      <button id="btnMobile" class="btn-vote js-btn-vote"> 0</button>
      
      <button id ="resetobile" onclick="reset('Mobile')" class="btn" style="vertical-align:middle">RESET Mobile</button>
     

    </div>

     
    <script>
    // on récupère tous les bouton ayant la class  js-btn-vote
    var buttons = document.getElementsByClassName('js-btn-vote');
    
    // pour chaque bouton, on gère le onclick
    for(let i=0; i<buttons.length;i++){
      buttons[i].onclick = function(e){
        this.innerHTML = parseInt(this.innerHTML) + 1;
      }
    }
    
    // fonction pour le reset
    function reset(quoi){
      document.getElementById('btn'+quoi).innerHTML = 0;
    }

    </script>

  </body>
</html>