Étant donné le code suivant, comment feriez-vous pour que chaque bouton ajoute 1 à son compteur respectif. Actuellement, lorsqu'un bouton est enfoncé, il ajoute 1 à son compteur, mais lorsque l'autre bouton est enfoncé, il ajoute la somme de l'autre compteur plus 1. Je sais que cela peut être fait en créant une autre variable add , mais est-il possible de le faire sans créer une autre fonction de compteur?

<button type="button" onclick="myFunction()">Count!</button>
<button type="button" onclick="myFunction2()">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

function myFunction(){
    document.getElementById("demo").innerHTML = add();
}

function myFunction2(){
    document.getElementById("demo2").innerHTML = add();
}
</script>
0
GoMega54 8 août 2016 à 06:29

4 réponses

Meilleure réponse

Vous pouvez faire ce qui suit, notez l'identifiant ajouté au bouton pour simplifier les choses

<button type="button" id="btn1">Count!</button>
<button type="button" id="btn2">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>
<script>
function counter(b, p) {
  var button = document.getElementById(b);
  var para = document.getElementById(p);
  var value = 0;
  button.addEventListener('click', function() {
    para.innerHTML = value += 1;
  });
}
counter('btn1', 'demo');
counter('btn2', 'demo2');
</script>

Chaque appel au compteur crée une fermeture pour l'événement click pour mettre à jour le <p> correct

Encore plus simple, vous n'avez pas besoin de créer un var pour contenir la valeur car la valeur est conservée dans l'élément lui-même

<button type="button" id="btn1">Count!</button>
<button type="button" id="btn2">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>
<script>
function counter(b, p) {
  var para = document.getElementById(p);
  document.getElementById(b).addEventListener('click', function() {
    para.innerHTML = parseInt(para.innerHTML) + 1;
  });
}
counter('btn1', 'demo');
counter('btn2', 'demo2');
</script>
1
Jaromanda X 8 août 2016 à 03:52
var counter1 = 0;
var counter2 = 0;
var add = function (count) {
    return count += 1;
};

function myFunction(){
    counter1 = add(counter1)
    document.getElementById("demo").innerHTML = counter1;
}

function myFunction2(){
    counter2 = add(counter2)
    document.getElementById("demo2").innerHTML = counter2;
}
<button type="button" onclick="myFunction()">Count!</button>
<button type="button" onclick="myFunction2()">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>

Vous redéfinissiez le compteur à 0 à chaque fois que vous appeliez add. De plus, comme vous voulez deux compteurs différents, vous avez besoin de deux variables différentes pour suivre chacune d'elles. Et honnêtement, vous pourriez probablement éliminer la fonction add et simplement ajouter à chaque compteur dans sa fonction spécifique avec counterX = counterX++ au lieu de counterX = add(counterX)

0
larz 8 août 2016 à 03:48

Envisagez de créer un compteur séparé comme suit sans avoir à dupliquer la logique add.

<button type="button" onclick="count1()">Count!</button>
<button type="button" onclick="count2()">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>
<script>
  function createCounter() {
    var counter = 0;
    return function () { return ++counter; }
  }

  var counter1 = createCounter();
  var counter2 = createCounter();

  function count1() {
    document.getElementById("demo").innerHTML = counter1();
  }

  function count2() {
    document.getElementById("demo2").innerHTML = counter2();
  }
</script>
1
oldrinb 8 août 2016 à 03:35

Vous pouvez également essayer ceci:

function counter(start) {
    return function increment(){
        start += 1;
        return start;
    }
}

function onButtonClick(sourceElemId, counterFunc){
    document.getElementById(sourceElemId).innerHTML = counterFunc();
}

En HTML:

<button type="button" 
       onclick="onButtonClick('demo', counter(0))">Count!
 </button>
<button type="button" 
        onclick="onButtonClick('demo2', counter(0))">Count!</button>
<p id="demo">0</p>
<p id="demo2">0</p>
1
Dhananjaya Kuppu 8 août 2016 à 03:56